2

我使用火箭主题模板并使用自定义 css 文件编辑了一些 css 代码。

我已经设法让它在 Firefox 和 Chrome 上看起来如何，但是 IE 看​​起来很奇怪。导航太低（按钮），标题也太低。

网站链接如下。

http://www.colmanprint.co.nz/rfloorings/

正如您在链接上看到的那样，菜单栏太低了，并且标题。

目前我使用 css 代码编辑 .rt-menubar {padding: 0px !important; margin-left:210px;} 当我删除 margin-left:210px; 它解决了我的问题，但随后菜单位于 chrome 和 firefox 的徽标后面。

所以我几乎需要为chrome和firefox保留margin-left：210px，但对于internet explorer有margin-left：0px

任何想法都会很棒！

4

1 回答 1

1

对于 IE9 之前的 Internet Explorer 版本，您可以使用条件注释来区分 IE 和其他浏览器。

这是一个简单的例子：

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

然后，ie9-and-below.css您可以应用一种样式，例如：

#ieParagraph.rt-menubar {
   margin-left:0px;
}

您的 HTML 可能如下所示：

<div class="rt-menubar" id="ieParagraph">
   <ul>Other stuff here...</ul>
</div>

如果在您的其他样式表中没有将样式应用到#ieParagraph该类所在的位置.rt-menubar，则这只会将 IE9 的左边距更改为仅#ieParagraph div在0px IE9 和以下。

对于 IE10，条件注释已被删除 - 研究使用Modernizr进行特征检测。

于 2013-05-08T23:07:36.013 回答