IE中的CSS问题

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

这是细节。顶部的每个父母都有一个子女<div>，其中包含<ul>中的子元素。我将它们以固定的<div>容器的宽度内联显示，以便将它们中的两个显示在一行中。每个子女<li>包含两个图像和一个介于两者之间的锚点。这两个图像提供了圆角，而锚点包含一个<span>，其中又包含子菜单项的文本。当鼠标在<span>上移动时，我通过javascript显示其父节点兄弟图像，并将其bg图像设置为白色。图像没有正确对齐，并且<span>标签在IE上仅从顶部降低了约10px。 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将visile并且还跨度的BG被设定为图像重复在x。引起麻烦的问题是跨度距离顶部约12px，左右两侧图像下方约5px。

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

干杯

阿亚兹阿拉维

来源

2010-05-27 Ayaz Alavi

IE中的CSS问题？不，它不可能！ – Skilldrick 2010-05-27 09:44:30

每当我在IE8中遇到问题时，我只是使用IE7兼容性标签 - 您会惊讶于摆脱了多少问题。（事实上，我可以解决错误，但我很懒） – Flukey 2010-05-27 09:46:24

@Jamie：您的网站很可能会停止在IE10中正确渲染。让我们希望你已经解决了你的懒惰，然后;-) – 2010-05-27 09:48:44

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问题，那就是菜单在胖子图片前面没有移动。

来源

2010-05-27 13:02:11

你试图消除在源li元素之间的空白？

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

而且我目前得到的JavaScript错误在IE ..

来源

2010-05-27 10:04:35

我试图删除空格，但它没有帮助。现在的问题是，跨度下降约5px，并有约10px的topmargin。看到我附在我的问题中的图片。 – 2010-05-27 11:47:25

圆角：你这样做是错误的。

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

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

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

为了使按钮看起来正确的，你需要做your image长：有这样的：

____________________________________ 
|          \ 
|          | 
|____________________________________/

来源

2010-05-27 10:06:19 Eric

我不认为使用IMG的圆角等有什么问题，这将向后兼容旧版浏览器。我同意你*不应该这样做，但是没有任何错误**。 – 2010-05-27 10:30:25

感谢您的建议，但我仍然从包含文本的跨度上15px顶部获得边距。尽管图像的位置是固定的，菜单也很稳定。 – 2010-05-27 10:37:16

我可以为此加薪吗？ – Eric 2010-05-27 11:20:41

回答

相关问题