html - 导航栏跨浏览器兼容性

Question

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

我在页面顶部添加了一个 float 导航栏，代码如下:

    <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 文件之后，您需要做的就是覆盖有问题的属性，在您的情况下，对:0;

如果它仍然无法正常工作，我发现自行测试条件注释以确保它们在驳回该想法之前有效是很有帮助的。尝试在您的 HTML 页面上将这样的内容放在显而易见的地方:

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