css internet explorer hacks

Question

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

我已经设法让它在Firefox和Chrome上看起来像我想要的样子，但IE看起来很弱。导航太低(按钮)，标题也太低。

网站链接如下所示。

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

正如你在链接上看到的，菜单栏太低了，而且标题也太低了。

目前，我正在使用css代码编辑.rt-menubar {padding: 0px !important；chrome left:210px；}当我去掉空白处时-left:210px；它修复了我的问题，但之后在chrome和firefox上菜单会移到logo后面。

所以我非常需要保留边距--对于chrome和firefox是210px，而对于internet explorer则是-左:0px。

任何想法都会很棒！

Answer 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>

如果在其他样式表中没有将样式应用到类也是.rt-menubar的#ieParagraph，这只会将#ieParagraph div的左边距更改为0px in IE9和only。

对于IE10，条件注释已被删除-请查看使用进行特征检测。