更改导航栏图像的 CSS 以适应 IE

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

.训练{ 左：170px； 宽度：89px； 背景图片：网址（../images/nav/new_nav.jpg）； 背景重复：不重复； 背景位置：-200px 0px； }

Answer 1

我在 IE 6 中使用过 *.html

/** 对于 IE6 / *html #相关产品 { 宽度：300px； 溢出：可见；
} *html #相关产品 ul { 位置：相对； 左：-65px;
} *html #related-products li { 边框：无；
} / IE6 hack 结束 **/

否则会有 IE 条件 cmets。

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

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

Answer 2

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

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