CSS条件注释不起作用答案

【问题标题】：CSS conditional Comment not workingCSS条件注释不起作用
【发布时间】：2012-05-07 05:22:35
【问题描述】：

我的 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 {宽度：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 不正确。这让我疯狂。我一定错过了一些简单的东西，但我已经看了太久了。

【问题讨论】：

标签： html css conditional

【解决方案1】：

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

<!--[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="">

【讨论】：

我认为你的第一个代码块是错误的。应该是<link href="non-ie.css" rel="stylesheet" type="text/css">
哦，你的意思是他的错误之一，明白了，是的，那是一个错误。等一下，我会改的。

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

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

【讨论】：

恕我直言，这个解决方案不如条件 cmets，因为它需要 Javascript 才能工作。
如果上述方法失败，这只是一种更简单的方法我同意 YMMD。
此 javascript 文件已过时。它不能正确处理较新版本的 firefox 等。否则它可能对检测特定的非 IE 浏览器有价值。