我有一个 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 不显示。这让我疯狂。我一定是遗漏了一些简单的东西,但我已经看得太久了。
最佳答案
只是为了您的实际错误,它在于您如何进行评论。应该是:
<!--[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: Here is the current iteration that we have in the 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. Anyway, our current version..
<!--[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]-->
关于html - CSS 条件注释不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10334068/