本文参考:
1.Using multiple-class selectors in IE7 and IE8,https://stackoverflow.com/questions/1671178/using-multiple-class-selectors-in-ie7-and-ie8
2.CSS selectors,https://www.quirksmode.org/css/selectors/
标准模式和怪异模式(Quirks mode)的区别,讨论最多的应该是盒子模型宽高的区别。最近在一个项目中发现在处理CSS的时候也有区别,怪异模式下会忽略多类选择器。
在html中加DOCTYPE头部可以让IE浏览器以标准模式来解析
下面看两段代码
有DOCTYPE头部的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
border: 1px solid;
}
.two.column {
width: 140px;
}
.three.column {
width: 220px;
}
.four.column {
width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>
在IE下执行结果如下
可以看到,三个输入框长度是不一样的
去掉DOCTYPE之后的代码如下(请在IE789下测试)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
border: 1px solid;
}
.two.column {
width: 140px;
}
.three.column {
width: 220px;
}
.four.column {
width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>
在IE9下执行结果如下
可以看到三个输入框长度变成一样的了,仿佛直接回到了IE5(目前网上大多数讨论的怪异模式的原型就是IE5)
经过测试比对,在上面的这个例子中
.two.column {
width: 140px;
}
.three.column {
width: 220px;
}
.four.column {
width: 300px;
}
怎么设置都是无效的,可以判定,怪异模式下IE不支持
CSS的多类选择器
从这个链接可以看到,IE5.5/6的怪异模式是不支持CSS的多类选择器的
但是这个页面并不全面,实际测试中,IE789的怪异模式同样是不能加载多类选择器的,所以上面这个图并不是标准的,只是为了说明怪异模式对CSS的支持程度有偏差
但是IE在推出IE10的时候怪异模式分裂成了两个,一个是传统的基于IE5的怪异模式,一个是兼容了HTML5元素基于IE10的新怪异模式。
发展的IE11的时候,微软有意把怪异模式给去掉了,默认模式是Edge
所以解决这个CSS兼容问题就需要指定文档模式了,加DOCTYPE能保证不进怪异模式,但不能保证你进的IE几,目前装了360浏览器的电脑会故意将IE的默认文档模式调低,没办法,再加个meta http-equiv="X-UA-Compatible"标签去指定文档模式吧