Question

我有一行CSS在IE中的行为与其他浏览器不同。我想在所有浏览器中看到这一行：

.header-ie .wrapper-ie:after { 
    position:absolute; 
    bottom:-33px; 
    width:100%; 
    height:34px; 
    content:""; 
    left:0; 
    background:url(../shadow-bg.png) no-repeat center;
    background-size:100% auto; 
    pointer-events:none
}

我希望它在IE（9或更低版本）中看起来像这样：

.header-ie .wrapper-ie:after{ 
    position:absolute; 
    bottom:-250px; 
    width:100%; 
    height:34px; 
    content:""; 
    left:0; 
    background-size:100% auto; 
    pointer-events:none
}

如何在样式表中完成此操作？

Answer 1

在HTML页面中，您可以实现条件CSS文件。在之后调用此，您已经调用了其他样式表。

<link rel="stylesheet" href="/style/site.css" /> 

您可能需要使用！important。
来装饰ie-legacy.css中的classes属性
注意： IE9（及更低版本）将不再在2016年1月12日之后收到Microsoft的安全或功能更新。

Answer 2

如果你只想改变1或2件事，你可以使用per-propery hack：

来自：http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/

#hack{
color:red; /* All browsers */
color:red !important;/* All browsers but IE6 */
_color:red; /* Only works in IE6 */
*color:red; /* IE6, IE7 */
+color:red;/* Only works in IE7*/
*+color:red; /* Only works in IE7 */
color:red\9; /* IE6, IE7, IE8, IE9 */
color:red\0; /* IE8, IE9 */
color:red\9\0;/*Only works in IE9*/
}

所以你最终会得到

.header-ie .wrapper-ie:after { 
    position:absolute; 
    bottom:-33px;
    bottom:-250px\9; 
    width:100%; 
    height:34px; 
    content:""; 
    left:0; 
    background:url(../shadow-bg.png) no-repeat center;
    background:none\9;
    background-size:100% auto;
    pointer-events:none
}

如何编写仅适用于特定浏览器的CSS？

2 个答案: