Question

我的网站包含屏幕右上角的下拉菜单。下拉列表显示正常，但当我将鼠标悬停在下拉列表中的元素上时，IE会将它们设置为不正确。然而，Firefox以我想要的方式显示它们。该网站是http://www.textsensor.com/test。任何人都可以告诉我在IE中导致问题的原因是什么？

以下是详细信息。顶部的每个父母都有一个子<div>，其中包含<ul>中的子元素。我正在显示它们的内联，<div>容器的宽度已固定，因此其中两个显示在一行中。每个孩子<li>包含两个图像和两者之间的锚点。这两个图像提供圆角，而锚包含<span>，而<span>又包含子菜单项的文本。当鼠标移过<span>时，我通过javascript显示其父锚同胞图像，并将其bg图像设置为白色。图像未正确对齐，$("#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"); });标记仅在IE上从顶部下降约10px。使用的jQuery如下所列：

<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>

一个菜单项的Html是：

{{1}}

当我鼠标悬停leftsubImg时，rightubImg将是可见的，并且span的bg也被设置为在x中重复的图像。引起麻烦的问题是，跨度从顶部开始具有约12px的边距，并且比左侧和右侧的图像低约5px。

IE输出为http://i46.tinypic.com/2858bl.gif http://i46.tinypic.com/2858bl.gif

干杯

Ayaz Alavi

Answer 1

圆角：你做错了。

从不使用<img>纯粹的风格内容（例如圆角）。它肯定不会向屏幕阅读器或禁用样式表的用户提供有用的信息。改为使用背景图片。

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

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

要使按钮看起来正确，您需要延长your image：让它像这样：

 ____________________________________
|                                     \
|                                      |
|____________________________________ /

Answer 2

您是否尝试删除源中li元素之间的空格？

只是一个快速猜测，它可能是IE空白错误......

此外，我目前在IE中收到javascript错误..

Answer 3

通过使用以下条件注释来修复IE 8和IE 7问题

<!--[if IE 8]>
<style>
.leftsubImg , .rightsubImg
{
    margin-bottom:-13px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
.leftsubImg , .rightsubImg
{
    vertical-align:middle;
    margin-bottom:3px;
}

</style>
<![endif]-->

它将图像移动到正确的位置。现在在IE6中我有z-index问题，菜单不会在胖子图片前移动。

IE中的CSS问题

3 个答案: