如何有条件地加载CSS

下面的代码定义，如果浏览器不是IE执行：如何有条件地加载CSS

<!--[if !IE]> --> 
... 
<!-- <![endif]-->

如果我想编辑有上述...

IF IE but IE version is less than 9 .. SHOW THIS 
ELSE IF IE version is greater than or equal to 9 OR Other Browser .. SHOW THIS

哪有我达到了吗？当我搜索所有我发现是如何决定是否IE浏览器版本或不IE浏览器。

来源

2014-03-25 SearchForKnowledge

，条件注释仅用于IE浏览器。一般来说，我所做的是首先加载常见案例，然后使用条件注释加载IE版本特定的CSS。 –

这些被称为_conditional comments_，并广泛记录在网络上。 – CBroe

另外，IE 10不支持条件注释。 –

使用条件注释不使用IE。

<!--[if !IE]> --> 
According to the conditional comment this is not IE 5-9 
<!-- <![endif]-->

而且你可以做更高级的东西：正如我敢肯定你已经阅读

来源

2014-03-25 21:14:57 JohanVdR

我接受这个答案...因为我想为两个目标！IE和其他浏览器。谢谢。 – SearchForKnowledge

你可以在CSS文件中的HTML页面中添加CSS条件语句IE浏览器不仅没有..

目标IE 8和更高

<!--[if gt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]-->

来源

2014-03-25 21:08:41

请记住，IE10 +不支持有条件的评论（以及正确的） – Bojangles

您可以使用这样的事情：

<!--[if lt IE 7]>  <html class="ie6"> <![endif]--> 
<!--[if IE 7]>   <html class="ie7"> <![endif]--> 
<!--[if IE 8]>   <html class="ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html>   <!--<![endif]-->

然后通过针对您的选择：

.ie8 .your-selector

如所述here。

如果你想有一个开关，你也可以在一个类的html标签，例如，

<!--[if gt IE 8]><!--> <html class ="i-am-so-happy-it-is-no-ancient-ie"><!--<![endif]-->

，并使用它像这样：

.i-am-so-happy-it-is-no-ancient-ie .your-selector{...} 
.ie6 .your-selector {...}

编辑我忘了IE 9 .. NOTE：事实上保罗爱尔兰建议使用这种形式（由我略作调整，以使非即开关可以使用单.IE的.class - 虽然你必须要知道，IE 6不支持多类，但你的想法）：

<!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ie"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ie"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9 ie"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-ie"> <!--<![endif]-->

有关说明原因，请参阅上面的link。

来源

2014-03-25 21:13:11

有趣，但它让我很沮丧 –

我看到很多网站使用这种方法。只需像其他浏览器一样添加常规条件语句即可。正确？ – SearchForKnowledge

@SearchForKnowledge不幸的是，我不记得为什么会出现这种情况（它有点复杂，并且在html5-boilerplate的github-repo上有一个线程），但最后一个元素正在为普通浏览器呈现为好。 –

如何有条件地加载CSS

回答

相关问题