如何为 IE 11 编写 CSS hack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20541306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write a CSS hack for IE 11?
提问by user2135651
How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet.
如何仅为 IE 11 破解或编写 css？我有一个在 IE 11 中看起来很糟糕的网站。我只是到处搜索，但还没有找到任何解决方案。
Is there any css selector?
有没有css选择器？
回答by Paul Sweatte
Use a combination of Microsoft specific CSS rules to filter IE11:
使用 Microsoft 特定 CSS 规则的组合来过滤 IE11：
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Filters such as this work because of the following:
由于以下原因，诸如此类的过滤器起作用：
When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
当用户代理无法解析选择器（即它不是有效的 CSS 2.1）时，它必须忽略选择器和以下声明块（如果有）。
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>References
参考
回答by SW4
In the light of the evolving thread, I have updated the below:
鉴于不断发展的线程，我更新了以下内容：
IE 11 (and above..)
IE 11（及以上..）
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 and above
IE 10 及以上
_:-ms-lang(x), .foo { property:value; }
or
或者
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10 only
仅 IE 10
_:-ms-lang(x), .foo { property:value; }
IE 9 and above
IE 9 及以上
@media screen and (min-width:0@media screen and (min-width:0@media screen and (min-width:0@media screen.foo { property /*\**/: value }
{
.foo {property:value;}
}
) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 and 10
IE 9 和 10
html>/**/body .foo {property:value;}
IE 9 only
仅 IE 9
@media *+html .foo {property:value;}
screen {
.foo {property:value;}
}
IE 8,9 and 10
IE 8,9 和 10
*:first-child+html .foo {property:value;}
IE 8 Standards Mode Only
仅限 IE 8 标准模式
@media @media screen {
.foo {property:value;}
}
screen\,screen {
.foo {property:value;}
}
IE 8
浏览器 8
.foo { *property:value;}
or
或者
.foo { #property:value;}
IE 7
浏览器 7
@media * html .foo {property:value;}
screen\,screen {
.foo {property:value;}
}
or
或者
.foo { _property:value;}
IE 6, 7 and 8
IE 6、7 和 8
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
IE 6 and 7
IE 6 和 7
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
or
或者
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
or
或者
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
IE 6, 7 and 8
IE 6、7 和 8
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
IE 6
浏览器 6
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
or
或者
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
Javascript alternatives
Javascript 替代品
Modernizr
现代化
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element
Modernizr 在页面加载时快速运行以检测功能；然后它使用结果创建一个 JavaScript 对象，并将类添加到 html 元素
User agent selection
用户代理选择
Javascript:
Javascript：
_:-ms-fullscreen, :root .selector {}
Adds (e.g) the below to htmlelement:
添加（例如）以下html元素：
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
Allowing very targetted CSS selectors, e.g.:
允许非常有针对性的 CSS 选择器，例如：
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Footnote
脚注
If possible, identify and fix any issue(s) without hacks. Support progressive enhancementand graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.
如果可能，在没有黑客攻击的情况下识别和修复任何问题。支持渐进增强和优雅降级。然而，这是一个并不总是可以获得的“理想世界”场景，因此 - 以上应该有助于提供一些不错的选择。
Attribution / Essential Reading
归因/基本阅读
回答by Hbirjand
Here is a two steps solution here is a hack to IE10 and 11
这是一个两步的解决方案，这里是对 IE10 和 11 的破解
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers
因为 IE10 和 IE11 支持 -ms-high-cotrast 你可以利用这一点来定位这两个浏览器
and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript
如果您想从中排除 IE10，您必须创建一个特定于 IE10 的代码，如下所示，它使用用户代理技巧，您必须添加此 Javascript
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
and this HTML tag
和这个 HTML 标签
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
and now you can write your CSS code like this
现在你可以像这样编写你的 CSS 代码
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
for more information please refer to this websites,wil tutorail, Chris Tutorial
欲了解更多信息，请参阅此网站，wil tutorialail，Chris Tutorial
And if you want to target IE11 and later,here is what I've found:
如果你想针对 IE11 及更高版本，这里是我发现的：
##代码##Here is a great resource for getting more information: browserhacks.com
回答by Jeff Clayton
I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.
自 2013 年秋季以来，我一直在编写这些并将它们贡献给 BrowserHacks.com——我写的这个非常简单，仅受 IE 11 支持。
##代码##and of course the div...
当然还有div...
##代码##So the text shows up in blue with internet explorer 11. Have fun with it.
所以文本在 Internet Explorer 11 中显示为蓝色。玩得开心。
-
——
More IE and other browser CSS hacks on my live test site here:
在我的实时测试站点上有更多 IE 和其他浏览器 CSS hack：
UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html
更新：http: //browserstrangeness.bitbucket.io/css_hacks.html
MIRROR: http://browserstrangeness.github.io/css_hacks.html
镜子：http: //browserstrangeness.github.io/css_hacks.html
(If you are also looking for MS Edge CSS Hacks, that is where to go.)
（如果你也在寻找 MS Edge CSS Hacks，那就是你要去的地方。）
回答by hoooman
You can use the following code inside the style tag:
您可以在 style 标签中使用以下代码：
##代码##Below is an example that worked for me:
下面是一个对我有用的例子：
##代码##Please note that since (#nav li) and (#nav a) are outside of the @media screen ..., they are general styles.
请注意，由于 (#nav li) 和 (#nav a) 在 @media 屏幕之外......，它们是通用样式。
回答by HDT
So I found my own solution to this problem in the end.
所以最后我找到了我自己的解决方案。
After searching through Microsoft documentationI managed to find a new IE11 only style msTextCombineHorizontal
在搜索Microsoft 文档后，我设法找到了一种新的 IE11 only 样式msTextCombineHorizontal
In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.
在我的测试中，我检查 IE10 样式，如果它们是正匹配，则我检查 IE11 样式。如果我找到它，那么它就是 IE11+，如果我没有找到，那么它就是 IE10。
Code Example:Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
代码示例：通过 CSS 能力测试 (JSFiddle) 检测 IE10 和 IE11
I will update the code example with more styles when I discover them.
当我发现它们时，我会用更多的样式更新代码示例。
NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.
注意：这几乎肯定会将 IE12 和 IE13 标识为“IE11”，因为这些样式可能会继续发扬光大。随着新版本的推出，我将添加进一步的测试，并希望能够再次依赖 Modernizr。
I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.
我正在将此测试用于回退行为。后备行为只是不那么迷人的样式，它没有减少功能。
回答by Liko
You can use js and add a class in html to maintain the standard of conditional comments:
您可以使用js并在html中添加一个类来维护条件注释的标准：
##代码##Or use a lib like bowser:
或者使用像 bowser 这样的库：
Or modernizr for feature detection:
或用于特征检测的 Modernizr：
回答by ikke aviy
I found this helpful
我发现这很有帮助
##代码##Add this under your <head>document
将此添加到您的<head>文档下
