CSS Internet Explorer 黑客答案

【问题标题】：css internet explorer hacksCSS Internet Explorer 黑客
【发布时间】：2013-05-03 07:43:57
【问题描述】：

我使用的是 Rockettheme 模板，并使用自定义 css 文件编辑了一些 css 代码。

我已经设法让它在 Firefox 和 Chrome 上看起来像我想要的那样，但是 IE 看起来很奇怪。导航太低（按钮），标题也太低。

网站链接如下。

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

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

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

任何想法都会很棒！

【问题讨论】：

您是在 IE10 还是 9 中遇到问题？
老实说我不知道 - 它可能都是 IE 浏览器，但我使用的是 IE 8。
对于 IE9 及之前的版本，您可以使用 Conditional cmets - 在 IE 中放置单独的 CSS。对于 IE10，您可能会使用 Modernizr。
感谢您的快速回复 - 你知道代码是什么吗？
你的意思是如果是这样，我已经尝试过了，但没有运气:(

【解决方案1】：

对于 IE9 之前的 Internet Explorer 版本，您可以使用 conditional comments 来区分 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 ，这只会将 #ieParagraph 的左边距更改为 div 到 0px 在 IE9 和仅在下。

对于 IE10，条件 cmets 已被删除 - 考虑使用 Modernizr 进行特征检测。

【讨论】：

谢谢 Zenith，我会试一试 - 同样的事情也适用于利润吗？只需创建一个新的 ie9-and-below.css 并更改边距？
@Callum 您将条件 cmets 放在哪里？您是否查看过 f12 工具来检查您的元素是否实际上具有 ieParagraph 样式以及它是否被覆盖（划掉）？
对于 joomla 中的 Rockettheme，我进入了模板管理器 - 然后在主页模板下我放置了 - 然后我创建了一个 CSS 并添加了 #ieParagraph.rt-menubar { margin-left:0px; }
唯一的是（我应该解释得更好）是主页模板是 php。
@Callum 对不起，我忘了 Joomla - 你的 CSS 是内联的吗？如果是这样，您可以使用 。通过谷歌搜索“Joomla 条件 cmets”，在 Joomla 中也有一些这样的例子