导航栏跨浏览器兼容性

Question

我遇到了跨浏览器代码的问题。

我在页面顶部添加了一个浮动导航栏，代码如下：

    <header id="page-header" class="content-info" role="contentinfo">
        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="1.html">1</a></li>
                <li><span>2</span>
                    <ul>
                        <li><a href="2.1.html">2.1</a></li>
                        <li><a href="2.2.html">2.2</a></li>
                        <li><a href="2.3.html">2.3</a></li>
                        <li><a href="2.4.html">2.4</a></li>
                    </ul></li>
                <li><a href="3.html">3</a></li>
                <li><a href="4.html">4</a></li>
                <li><a href="5.html">5</a></li>
            </ul>
        </nav>
    </header>

使用下一个 css 代码：

header#page-header {
z-index: 9999;
position: fixed;
height: 40px;
line-height: 40px;
top: 0;
right: 0;
background: white;
text-align: center;
width: 100%;
border-top: 1px solid rgba(0,0,0,0.2);
margin-top: 0;
margin-bottom: 2px;
color: #5b5b5b;
display: inline-table;
}

它可以在除 IE 之外的所有浏览器上完美运行。导航菜单不显示，这是因为参数“right: 0;”。我曾尝试删除此参数，但在 Chrome 和 Safari 浏览器上，菜单移动到页面右侧的一半。

我尝试为所有浏览器创建样式，但 IE 如下所示：

<!--[if !IE]>< -->
<link rel="stylesheet" type="text/css" href="css/xbrowser.css" />
<!-- ><![endif]-->

xbrowser.css 文件包含：

header#page-header {
right: 0;
}

我已确保删除参数“right: 0;”从主css文件。这不起作用，因为 IE 仍然可以识别我告诉它忽略的 css 文件。

有人可以建议一种解决方法，让此功能在所有浏览器（即 Chrome、Safari、Opera、Mozilla 和 IE）上都能正常工作吗？

提前致谢

Answer 1

您需要更改您的条件注释，目前所有浏览器仍然可以阅读：

<!--[if ie]>
    Stuff. Only IE will read what's in here (up till IE 10)
<![end if]-->

在大多数情况下，需要特殊处理的是 IE！这是IE conditional comments 的一个很好的指南，它们非常方便。

至于导航栏问题，只要您的 IE-only CSS 出现在 主 css 文件之后，您需要做的就是覆盖有问题的属性，在您的情况下，right:0;

如果它似乎仍然无法正常工作，我发现自行测试条件 cmets 以确保它们在消除该想法之前正常工作会有所帮助。尝试在您的 HTML 页面上清楚地显示这样的内容：

<!--[if ie]>
    <h1>Conditional comments working in IE!</h1>
<!--[end if]>