CSS条件注释不起作用

Question

我的div无法在Chrome，IE和FF中正确排列。 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; padding-top：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。 这让我疯狂。 我一定错过了一些简单的东西，但是我已经看了太久了。

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的文章：

条件样式表与CSS hacks？ 答：都不行！

更新：

2012.01.17：这是HTML5 Boilerplate中的当前迭代。 实际上，我们尝试将其缩减为IE≤8的单个.oldIE类（与安全的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 个解决方案

解决方案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