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

最新推荐文章于 2023-02-22 10:03:18 发布

gsls200808

最新推荐文章于 2023-02-22 10:03:18 发布

阅读量387

点赞数

分类专栏：编程文章标签： IE 怪异模式 CSS Quirks

本文链接：https://blog.csdn.net/gsls200808/article/details/79185906

版权

编程专栏收录该内容

101 篇文章 5 订阅

订阅专栏

本文参考：

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的多类选择器的