IE 10 特定的 CSS
Posted
技术标签:
【中文标题】IE 10 特定的 CSS【英文标题】：IE 10 specific 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 因为样式没有生效 您可以执行类似<!--[if IE]><body class="ie"><![endif]--> 之类的操作，如果不是 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 他们不支持媒体查询。
【参考方案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://***.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
【讨论】：
以上是关于IE 10 特定的 CSS的主要内容，如果未能解决你的问题，请参考以下文章