IE怪异模式下不能加载多类选择器

朱雀 2022-06-01 11:26 39阅读 0赞

本文参考：

1.Using multiple-class selectors in IE7 and IE8，[https://stackoverflow.com/questions/1671178/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/][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下执行结果如下

![SouthEast][]

可以看到，三个输入框长度是不一样的

去掉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下执行结果如下

![SouthEast 1][]  
可以看到三个输入框长度变成一样的了，仿佛直接回到了IE5（目前网上大多数讨论的怪异模式的原型就是IE5）

经过测试比对，在上面的这个例子中

.two.column {
                width: 140px;
            }
    
            .three.column {
                width: 220px;
            }
    
            .four.column {
                width: 300px;
            }

怎么设置都是无效的，可以判定，怪异模式下IE不支持 CSS的多类选择器

从[这个链接][https_www.quirksmode.org_css_selectors]可以看到，IE5.5/6的怪异模式是不支持CSS的多类选择器的

![SouthEast 2][]

但是这个页面并不全面，实际测试中，IE789的怪异模式同样是不能加载多类选择器的，所以上面这个图并不是标准的，只是为了说明怪异模式对CSS的支持程度有偏差

但是IE在推出IE10的时候怪异模式分裂成了两个，一个是传统的基于IE5的怪异模式，一个是兼容了HTML5元素基于IE10的新怪异模式。

发展的IE11的时候，微软有意把怪异模式给去掉了，默认模式是Edge

所以解决这个CSS兼容问题就需要指定文档模式了，加DOCTYPE能保证不进怪异模式，但不能保证你进的IE几，目前装了360浏览器的电脑会故意将IE的默认文档模式调低，没办法，再加个meta http-equiv="X-UA-Compatible"标签去指定文档模式吧

[https_stackoverflow.com_questions_1671178_using-multiple-class-selectors-in-ie7-and-ie8]: https://stackoverflow.com/questions/1671178/using-multiple-class-selectors-in-ie7-and-ie8
[https_www.quirksmode.org_css_selectors]: https://www.quirksmode.org/css/selectors/
[SouthEast]: /images/20220601/0b9ccf46c1f34ad2bf58fce368e93c52.png
[SouthEast 1]: /images/20220601/b45a6161d6cf443898ea2e3163be2a9a.png
[SouthEast 2]: /images/20220601/839150fdf3a44488a040df229eece43f.png