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以外的所有浏览器。导航菜单没有显示，这是因为参数＆＃34;右：0;＆＃34;。我尝试删除此参数，但随后在浏览器Chrome和Safari上，菜单会移到页面右侧的一半。

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

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

包含以下内容的xbrowser.css文件：

header#page-header {
right: 0;
}

我确保删除参数＆＃34;右：0;＆＃34;来自主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文件之后出现，您需要做的就是覆盖违规属性，在您的情况下，{{1} }

如果它仍然无法正常工作，我发现自己测试条件评论有助于确保他们在解除这个想法之前继续工作。尝试在HTML页面上放置这样的内容：

right:0;

导航栏跨浏览器兼容性

1 个答案: