IE 10 特定的 CSS答案

【问题标题】：IE 10 specific CSSIE 10 特定的 CSS
【发布时间】：2015-01-15 16:57:09
【问题描述】：

我可以拥有特定于 IE 的 CSS 吗？

在这种情况下，我不能包含另一个脚本。

所以我不能这样做：

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

这不起作用：

<!--[if IE]>
    <style>
        @media only screen and (min-width: 943px) and (orientation:portrait){
            .ele{
                width:100px;
            }
        }
    </style>
<![endif]-->

还有其他方法可以添加特定于 IE 的 CSS 吗？

【问题讨论】：

“不起作用”以什么方式？
@JamesDonnelly 因为样式没有生效
您可以执行类似 之类的操作，如果不是 ie，则可以使用备用方法，然后只需设置您的 ie 元素样式：.ie .etc {}See this for more info
对于 IE 10+ 样式，你可以使用这个@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go这里 */ }
在哪个版本的 ie 中这不起作用？如果低于 ie9 他们不支持媒体查询。

标签： css internet-explorer media-queries stylesheet

【解决方案1】：

编写 IE 特定的 css 样式。

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

【讨论】：

【解决方案2】：

你可以试试这个，

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.

IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/


IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector

The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }          
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.

IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

IE10 Only
http://css-tricks.com/ie-10-specific-styles/
==================
Use this JavaScript: 
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

IE10 and IE11
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
}

参考https://gist.github.com/ricardozea/5549389

【讨论】：