All*_*ins 1 html css conditional
我有一个在Chrome,IE和FF中没有正确排列的div.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.这让我疯狂.我一定错过了一些简单的东西,但我一直在看它太久了.
只是为了您的实际错误,它取决于您如何进行评论.它应该是:
<!--[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的文章:
更新:
2012.01.17:这是我们在HTML5 Boilerplate中的当前迭代.我们实际上试图将其降低到IE≤8的单个.oldIE类(与安全的css hacks一起使用),但是没有飞行.无论如何,我们目前的版本..
Run Code Online (Sandbox Code Playgroud)<!--[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]-->