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

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
}

如何以我的风格完成此操作 sheet？

Answer 1

在您的 HTML 页面中，您可以实施条件 CSS 文件。在调用其他样式表之后再调用它。

<link rel="stylesheet" href="/style/site.css" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="/style/ie-legacy.css" />
<![endif]-->

您可能需要用 !important.

修饰 ie-legacy.css 中的类属性

注意： IE9（及更低版本）在 2016 年 1 月 12 日后将不再从 Microsoft 接收安全或功能更新。

Answer 2

如果你只想改变一两件事，你可以使用 per-属性 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; /* IE6, IE7, IE8, IE9 */
color:red[=10=]; /* IE8, IE9 */
color:red[=10=];/*Only works in IE9*/
}

所以你最终会得到

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

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

How can I write CSS that only applies to specific browsers?

html

css

internet-explorer