Question

我有一个div在Chrome，IE和FF中没有正确排队。 Chrome需要左侧填充：40px;虽然IE和FF没有。我已经玩了几个小时，我知道我错过了一些简单的事情。这就是我一直在尝试的：

<!--[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;填充顶：40像素;向左飘浮;}

我也试过这个：

#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。这让我疯狂。我必须遗漏一些简单的东西，但我已经看了太久了。

Answer 1

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

<!--[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's文章：

Conditional stylesheets vs CSS hacks? Answer: Neither!

<强>更新

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



<html class="">

Answer 2

尝试下载此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
}

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

CSS条件评论不起作用

2 个答案: