CSS条件注释不起作用

Question

I have a div that isn't lining up correctly in Chrome, IE and FF. 我的div无法在Chrome，IE和FF中正确排列。 Chrome needs a padding-left:40px; Chrome需要padding-left：40px; while IE and FF do not. IE和FF则没有。 I've been playing with if for a few hours and I know I'm missing something simple. 我已经和if玩了几个小时，而且我知道我缺少一些简单的东西。 This is what I've been trying: 这就是我一直在尝试的：

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

I've also tried in the normal style.css: 我也尝试了正常的style.css：

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

or #lower .expo {width:400px; 或#lower .expo {width：400px; padding-top:40px; padding-top：40px; float:left;} 向左飘浮;}

I also tried this: 我也试过这个：

#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]-->

Interestingly if I do this: 有趣的是，如果我这样做：

<!--[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 displays correct but not FF or Chrome. IE显示正确，但不显示FF或Chrome。 Its driving me crazy. 这让我疯狂。 I must be missing something simple but I've been looking at it too long. 我一定错过了一些简单的东西，但是我已经看了太久了。

Answer 1

Just for the sake of your actual error, it lies in how you are doing the comments. 仅出于实际错误的考虑，这取决于您的评论方式。 It should be: 它应该是：

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

For a better way than that, here's what I use: 除此以外，还有一种更好的方法：

<!-- 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]-->

The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. 这样做的好处是，您可以保持仅使用1个样式表的最佳实践。 You simply preface your target with the corresponding IE class you want to hack. 您只需将要入侵的相应IE类作为目标的开头即可。

For example: .ie6 #target-id 例如： .ie6 #target-id

For a more in depth explanation, check out Paul Irish's article: 有关更深入的解释，请查看Paul Irish的文章：

Conditional stylesheets vs CSS hacks? 条件样式表与CSS hacks？ Answer: Neither! 答：都不行！

UPDATE: 更新：

2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. 2012.01.17：这是HTML5 Boilerplate中的当前迭代。 We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn't fly. 实际上，我们尝试将其缩减为IE≤8的单个.oldIE类（与安全的CSS hacks一起使用），但这并没有实现。 Anyway, our current version.. 无论如何，我们当前的版本。
    <html class="">

Answer 2

Try downloading this javascript file. 尝试下载此javascript文件。 http://firststepdesign.org/browserselect.js Then link it in your html. http://firststepdesign.org/browserselect.js然后将其链接到您的html中。

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

After that go to your css and use these to select specific css for different browsers. 之后，转到您的CSS，并使用它们为不同的浏览器选择特定的CSS。

only internet explorer will detect this. 只有Internet Explorer会检测到。

.ie .example {
  background-color: yellow
}

Only firefox will detect this. 只有Firefox会检测到这一点。

.gecko .example {
  background-color: gray
}

Only Safari and Chrome will detect this. 只有Safari和Chrome可以检测到。

.webkit .example {
  background-color: black
}

Hope this helps if you need to more comment. 希望这对您有所帮助。

CSS条件注释不起作用

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-04-26 13:10:22

解决方案2
1 2012-04-26 13:15:25

CSS条件注释不起作用

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-04-26 13:10:22

解决方案2 1 2012-04-26 13:15:25

解决方案1
8 已采纳 2012-04-26 13:10:22

解决方案2
1 2012-04-26 13:15:25