我如何才能破解或只写css IE 11?我有一个网站在IE 11中看起来很糟糕。我只是到处找,但还没有找到解决办法。
有css选择器吗?
我如何才能破解或只写css IE 11?我有一个网站在IE 11中看起来很糟糕。我只是到处找,但还没有找到解决办法。
有css选择器吗?
当前回答
我发现这很有帮助
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
将此添加到<head>文档下
其他回答
你可以使用js并在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";
}
或者使用像bowser这样的库:
https://github.com/ded/bowser
或者modernizr用于特征检测:
http://modernizr.com/
这里有一个两步解决方案 下面是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
从2013年秋天开始,我就一直在写这些,并把它们贡献给BrowserHacks.com——我写的这个非常简单,而且只有IE 11支持。
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
当然还有div…
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
所以文本在ie11中显示为蓝色。祝你玩得开心。
-
更多IE和其他浏览器的CSS技巧在我的现场测试站点这里:
更新:http://browserstrangeness.bitbucket.io/css_hacks.html
镜子:http://browserstrangeness.github.io/css_hacks.html
(如果你也在寻找MS Edge CSS Hacks,那就是去的地方。)
我发现这很有帮助
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
将此添加到<head>文档下
你可以在样式标签中使用以下代码:
@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屏幕之外…,它们是一般的款式。