Question

我可以使用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？

Answer 1

你可以试试这个，

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

Answer 2

编写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 */

IE 10特定的CSS

2 个答案: