1

我有一个在 Chrome、IE 和 FF 中没有正确排列的 div。Chrome 需要一个 padding-left:40px; 而 IE 和 FF 则没有。我一直在玩 if 几个小时，我知道我错过了一些简单的东西。这是我一直在尝试的：

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

我也尝试过正常的 style.css：

<!--[if !IE]--> 
#lower .expo {padding-left:40px;}
<!-- <![endif]-->

或#lower .expo {width:400px; 填充顶部：40px；向左飘浮;}

我也试过这个：

#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->

有趣的是，如果我这样做：

<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}

IE 显示正确但 FF 或 Chrome 不正确。这让我疯狂。我一定错过了一些简单的东西，但我已经看了太久了。

4

2 回答 2

8

只是为了您的实际错误，它在于您如何进行评论。它应该是：

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

为了比这更好的方法，这就是我使用的：

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6"    lang="en"><![endif]-->
<!--[if IE 7]>    <html class="ie7"    lang="en"><![endif]-->
<!--[if IE 8]>    <html class="ie8"    lang="en"><![endif]-->
<!--[if IE 9]>    <html class="ie9"    lang="en"><![endif]-->
<!--[if IE 10]>   <html class="ie10"   lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->

这样做的好处是您可以保持仅使用 1 个样式表的最佳实践。你只需在你的目标前面加上你想破解的相应的 IE 类。

例如： .ie6 #target-id

如需更深入的解释，请查看Paul Irish 的文章：

条件样式表 vs CSS hacks？答：都没有！

更新：

2012.01.17：这是我们在 HTML5 Boilerplate 中的当前迭代。实际上，我们试图将其减少到 IE ≤8 的单个 .oldIE 类（与安全的 css hack 一起使用），但这并没有成功。无论如何，我们当前的版本..

<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
于 2012-04-26T13:10:22.743 回答
1

尝试下载这个 javascript 文件。http://firststepdesign.org/browserselect.js然后将它链接到你的 html 中。

<script src="browserselect.js" type="text/javascript"></script>

之后转到您的 css 并使用它们为不同的浏览器选择特定的 css。

只有 Internet Explorer 会检测到这一点。

.ie .example {
  background-color: yellow
}

只有 Firefox 会检测到这一点。

.gecko .example {
  background-color: gray
}

只有 Safari 和 Chrome 会检测到这一点。

.webkit .example {
  background-color: black
}

如果您需要更多评论，希望这会有所帮助。

于 2012-04-26T13:15:25.593 回答