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

本文参考：

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头部的代码

    
    


Two Columns
Three Columns
Four Columns

在IE下执行结果如下

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

去掉DOCTYPE之后的代码如下（请在IE789下测试）

    
    


Two Columns
Three Columns
Four Columns

在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"标签去指定文档模式吧