IE 中的 CSS 问题答案

【问题标题】：CSS issue in IEIE 中的 CSS 问题
【发布时间】：2011-02-24 14:06:27
【问题描述】：

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

这里是详细信息。顶部的每个父级都有一个子级<div>，其中包含<ul> 中的子元素。我将它们与固定的<div> 容器的宽度内联显示，以便其中两个显示在一行中。每个子 <li> 包含两个图像和一个锚点。这两个图像提供了圆角，而锚点包含<span>，而<span> 又包含子菜单项的文本。当鼠标移到<span> 上时，我通过javascript 显示其父锚同级图像，并将其bg-image 设置为白色。图像未正确对齐，<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>

当我将鼠标悬停在 span leftsubImg 上时，rightsubImg 将是可见的，并且 span 的 bg 也被设置为在 x 中重复的图像。引起麻烦的问题是 span 距顶部的边距约为 12px，而其左右图像下方的边距约为 5px。

IE 输出为

干杯

阿亚兹·阿拉维

【问题讨论】：

IE 中的 CSS 问题？不，不可能！
每当我在 IE8 中遇到问题时，我都会使用 IE7 兼容性标签 - 你会惊讶于解决了多少问题。（确实，我可以解决错误，但我很懒）
@Jamie：您的网站很可能会停止在 IE10 中正确呈现。让我们希望你到那时已经解决了你的懒惰;-)
将其bg-image 设置为white!?现在看来，白色不再是一种颜色，而是一种形象……
让我们放过蛇，去找有用的人吧。

标签： jquery html css internet-explorer

【解决方案1】：

圆角：你做错了。

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

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

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

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

 ____________________________________
|                                     \
|                                      |
|____________________________________ /

【讨论】：

我不认为将 IMG 用于圆角等有什么问题，这将向后兼容旧版浏览器。我同意你不应该这样做，但这并没有错。
感谢它的建议，但我仍然在包含文本的跨度上从 15px 的顶部获得边距。虽然图像定位固定，菜单也很稳定。
你只使用一张图片就退出了，我一开始就这样做了，但是我的子菜单项的长度不同，例如我最短的菜单项之一是长度为 5 个字符，最大的菜单项长度为 25 个字符，因此一张图像不适用于我的所有菜单项，因为图像在 x 方向上重复较大的菜单项。如果您知道任何允许自动拉伸 bg 图像以便所有项目都可以容纳在一个图像中的技术，那么这种技术可能很有用。
你看我说的了吗？您需要做的就是更改您的“submenuImg3.png”图像以查看我的答案中的 ascii 艺术：一个边缘平坦，另一轮。然后，我给你的 URL 上的那个就可以了。
IE7、IE8 是通过动态图像固定的。 IE6 没有在底部图像前显示菜单（胖子图片）。这是一个 z-index 问题。谁能告诉我如何将我的图像移到前面？

【解决方案2】：

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

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

另外，我目前在 IE 中遇到 javascript 错误..

【讨论】：

我尝试删除空格，但没有帮助。现在的问题是，跨度下降了大约 5 像素，并且上边距约为 10 像素。请参阅我在问题中附加的图片。

【解决方案3】：

IE 8 和 IE 7 问题已通过使用以下条件 cmets 修复

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

【讨论】：