我如何才能破解或只写css IE 11?我有一个网站在IE 11中看起来很糟糕。我只是到处找，但还没有找到解决办法。
有css选择器吗?
当前回答
你可以在样式标签中使用以下代码:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
下面是一个对我有用的例子:
<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>
请注意，由于(#nav li)和(#nav a)在@media屏幕之外…，它们是一般的款式。
其他回答
我发现这很有帮助
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
将此添加到<head>文档下
所以最后我找到了自己的解决方案。
在搜索微软文档后，我设法找到了一个新的IE11风格msTextCombineHorizontal
在我的测试中，我检查了IE10的样式，如果它们是积极匹配的，那么我检查了IE11的唯一样式。如果我找到了，那就是IE11+，如果我没找到，那就是IE10。
代码示例:通过CSS能力测试(JSFiddle)检测IE10和IE11
当我发现更多的样式时，我将更新代码示例。
注意:这几乎肯定会将IE12和IE13识别为“IE11”，因为这些风格可能会被延续。随着新版本的推出，我将添加进一步的测试，希望能够再次依赖Modernizr。
我用这个测试来测试后备行为。后备行为只是不那么迷人的样式，它没有减少功能。
使用微软特定的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>
这样的过滤器工作的原因如下:
当用户代理无法解析选择器(即，它不是有效的css2.1)时，它必须忽略选择器和下面的声明块(如果有的话)。
<！doctype html > < html > < >头 <title>IE10/11 Media Query Test < meta charset = " utf - 8 " > <meta http-equiv="X-UA-Compatible" content="IE=edge"> <时尚> @media all and (-ms-high-contrast:none) ｛ .foo {color:绿色}/* IE10 */ *::-ms- background， .foo {color: red} /* IE11 */ ｝ > < /风格 < / >头 <身体> <div class="foo">嗨!!< / div > < /身体> < / html >
参考文献
我如何仅针对ie10的某些情况，如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码? 微软CSS扩展 CSS 2.1:规则集、声明块和选择器
这里有一个两步解决方案 下面是IE10和ie11的破解方法
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
因为IE10和IE11支持-ms-高对比度，你可以利用这个优势来瞄准这两个浏览器
如果你想排除IE10，你必须创建一个IE10特定的代码，如下所示，它使用用户代理技巧，你必须添加这个Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
这个HTML标签
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
现在你就可以像这样写CSS代码了
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
更多信息请参考本网站，威尔教程，克里斯教程
如果你想针对IE11及以后版本，以下是我的发现:
_:-ms-fullscreen, :root .selector {}
这里有一个获取更多信息的很好的资源:browserhacks.com
你可以在样式标签中使用以下代码:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
下面是一个对我有用的例子:
<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>
请注意，由于(#nav li)和(#nav a)在@media屏幕之外…，它们是一般的款式。
