2012-07-28 87 views
24

我知道,你可以使用内部HTML的IE条件注释里面条件注释为html中的特定元素。例如,你可以使用此Chrome/Safari浏览器破解CSS文件的CSS代码里面...使用IE浏览器的样式表

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
} 

但黑客利用IE的CSS样式表像这里面:

<!--[if IE]> 
     .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
<![endif]--> 

做不行。如何在样式表中使用来仅限IE?

+1

条件注释:1)不是一个劈2)并不适用于CSS,只有HTML。 – BoltClock 2012-07-28 18:44:18

+0

感谢BoltClock,所以我看到 – 2012-07-28 19:09:14

回答

23

条件注释在样式表中不起作用。相反,您可以在您的HTML中使用条件注释将不同的CSS类或ID应用于可以使用CSS定位的元素。

例如:

<!--[if IE]> 
    <div id="wrapper" class="ie"> 
<![endif]--> 
<!--[if !IE]> 
    <div id="wrapper"> 
<![endif]--> 

另外,还有一些工具如Modernizr是在做一个非常相似的方式特征检测(通过添加类的<html>元素)。您可以使用它逐步增强您的新版浏览器的设计/脚本,同时仍支持旧版浏览器。

+0

谢谢你,你的代码是有意义的,它可以用来做我想做的事情... – 2012-07-28 19:11:59

+0

Modernizr如何自动化它?请解释,因为我只知道Modernizr“检测”。 – 2013-10-20 22:40:37

+1

@YannisDran,你是对的,它不会自动添加IE类,但是,它会执行功能检测,然后您可以通过CSS进行目标检测也是类似的方法。我已经更新了答案,对此更清楚。 – 2013-10-21 16:31:13

4

你不能使用IE条件注释,但你可以使用黑客。 This page of CSS hacks解释IE黑客可以使用(和更多)。

+0

谢谢,这种回答我的问题(顺便说一句,我以前看到这篇文章,我通常做一些研究之前,我张贴在堆栈),但它只有一个CSS的IE7解决方案和下面即: IE 6和下面 * HTML {} IE 7及以下 *:第一胎+ HTML {} * HTML {} IE 7只 *:第一胎+ HTML {} 我想一种使用in-CSS黑客攻击所有IE浏览器的方法,但似乎这是不可能的。 – 2012-07-28 19:07:26

2

你不这样做,只需使用IE条件注释加载特定的IE浏览器的样式表:

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css"></link> 
<![endif]--> 

有CSS黑客,但注意,破解需要使用解析错误(某种)将特定的CSS规则定位到浏览器。这些不太可能在随后的修补程序中被更正为浏览器的特定版本,但它们将在更高版本中得到纠正(因此,IE 9和10不会受到针对IE 6或针对Mac的IE 5的CSS攻击的影响。 ..)。

1

你想要做的就是像样式表中的任何东西一样对任何其他浏览器进行样式设置。在将普通样式表导入页面之后,您将随后导入一个IE特定的样式表和常规<!--[if IE]>条件语句。

以下方法导入所有浏览器的样式,然后使用您的IE特定样式来覆盖那些不兼容,无法正确呈现或需要在IE中调整使用的样式。

17

它可以比德里克Hunziker说起来容易:

只要加入这个代码,因为它是:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 

然后你就可以很容易地对其进行定位,例如,如果你想针对IE 8和写下:

.lt-ie9 body{css rule here;} 

你就完成了!

干杯

2

IE样式表黑客

.Class { 
    color: green;  /* standard */ 
    color: green\9; /* IE 8 and below */ 
    *color: green;  /* IE 7 and below */ 
    color: green !ie; /* IE 7 and below */ 
    _color: green;  /* IE 6 */ 
} 
+13

请不要使用上面的黑客。这些信息具有误导性,可能会给您带来比解决问题更多的问题。举例来说,'\ 9' hack *不会针对IE 8及以下版本。它会影响IE 7,8,9和10.请不要使用这些**。 – Sampson 2014-12-12 23:45:57