jquery - IE 中的 CSS 问题

Question

我的网站在屏幕右上角包含下拉菜单。下拉列表显示正常，但是当我将鼠标悬停在下拉列表中的元素上时，IE 会错误地呈现它们。然而，Firefox 以我想要的方式显示它们。网址是http://www.textsensor.com/test .谁能告诉我是什么导致了 IE 中的问题？

这里是详细信息。顶部的每个 parent 都有一个 child <div>其中包含 <ul> 中的子元素.我以 <div> 的宽度内联显示它们容器固定，因此其中两个显示在一行中。每个 child <li>包含两个图像和中间的 anchor 。这两张图片提供圆 Angular ，而 anchor 包含 <span> ，它又包含子菜单项的文本。当鼠标移到 <span> 上时，我通过 javascript 显示它的父 anchor 兄弟图像，并将它的 bg-image 设置为白色。图像未正确对齐并且 <span>仅在 IE 上，标签从顶部下降了大约 10 像素。下面列出了使用的 jQuery:

   $("#jsddm li ul li a span").hover(function(){
        $(this).parent().siblings("img").css("visibility", 'visible');
        $(this).parent().css("border-bottom", "#a00 5px double");
    }, function(){
        $(this).parent().siblings("img").css("visibility", 'hidden');
        $(this).parent().css("border-bottom", "none");
    });

一个菜单项的 HTML 是:

<li><img src='images/submenuImg1.png' class='leftsubImg'>
<a href="pricerates.php"><span>Price Rates</span></a>
<img src='images/submenuImg3.png' class='rightsubImg'>
</li>

当我将鼠标悬停在 leftsubImg 上时，rightsubImg 将可见，并且 span 的 bg 设置为在 x 中重复的图像。造成麻烦的问题是 span 从顶部开始有大约 12px 的边距，并且在其左右两侧的图像下方大约有 5px。

IE 输出为

干杯

阿亚兹阿拉维

Answer 1

圆 Angular :你做错了。

永远不要使用 <img>用于纯粹的风格内容(例如圆 Angular )。它肯定不会向屏幕阅读器或禁用样式表的用户提供有用的信息。请改用背景图片。

此外，.hide()不是您想对图像执行的操作:这样做会将它们从文档流中删除，这意味着 span 元素会移动。使用 .css('visibility','hidden')相反。

事实上，您根本不需要javascript。看看http://www.jsfiddle.net/TeTLw/ .该按钮看起来不太正确，但它应该可以跨浏览器工作。

为了让按钮看起来正确，你需要制作your image更长:像这样:

 ____________________________________
|                                     \
|                                      |
|____________________________________ /