Question

我的水平导航栏中填充了来自包含所有子图像的一个图像的链接的图像;每个导航项目图像由较大图像内的像素位置识别。这在Firefox和Safari中完全正常，但在IE中，导航栏中的所有图像都放错了位置（只能看到单词的顶部）。两个问题：

如何在css中修复此问题，以便与IE的更新版本（和当前版本）重新兼容
我是否需要单独的IE样式表？

这是css（仅针对少数链接截断）：

ul#navbar {
    width: 750px;
    height: 22px;
    margin: 0px;
    padding: 0px;
    text-indent: -9999px;
    border: none;
}
ul#navbar li {
    float: left;
    height: 22px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border: none;
    /*position:absolute;*/
}
ul#navbar li a {
    display: block;
    height: 22px;
    border: none;
}

.home {
    left: 0px;
    width: 78px;
    background-image: url(../images/nav/new_nav.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.classes {

    /*left: 78px; */
    width: 92px;
    background-image: url(../images/nav/new_nav.jpg);
    background-repeat: no-repeat;
    background-position: -100px 0px; 
}

.training { 左：170px; 宽度：89px; background-image：url（../ images / nav / new_nav.jpg）; background-repeat：no-repeat; background-position：-200px 0px; }

Answer 1

嗯......我想你不想听到这个，但是：永远不要依赖HTML / CSS中的精确像素位置（叠加在 one 上的图像映射>图像是唯一的例外）。

HTML根本不是用于像素精确设计的。根据您的描述，在不支持您似乎依赖的技术之一的浏览器上甚至不可能优雅地回退。那些太窄而不能显示完整导航栏的屏幕（例如移动设备）呢？在最好的情况下，你会得到一个多线导航栏，但是根据你的描述，由于位置错误，它会被打破......

Answer 2

我在IE 6中使用了* .html

/ **对于IE6 / * html＃相关产品 {     宽度：300px;     溢出：可见;
} * html＃related-products ul {      位置：相对;      左：-65px;
} * html＃related-products li {     border：none;
} / IE6黑客攻击结束** /

否则就有IE条件评论。

http://www.quirksmode.org/css/condcom.html

就单独的样式表而言，您可以创建一个使用服务器端语言检测浏览器，如果Internet Explorer确保添加了IE，则可以将这些添加到现有的CSS文件中。我已经做到了。

改变导航条图像的CSS以适应IE

2 个答案: