Question

这是一个简单的测试用例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>why</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body:first-letter {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <span>*</span>
    œ blablabla (non-latin character on a new-line is also triggers that problem just like a single span with * without any characters following it)
</body>
</html>

出于某种原因，IE9报告显示该页面时出现问题并以兼容模式重新加载页面。为什么？该代码有什么问题？

如果<span>更改为<div>，则表示正常。如果它更改为<div> display:inline（与span相同），则会再次重新加载页面。如果*更改为 ，则一切正常，即使在<span>中也是如此。那么IE9在那段代码中不喜欢什么？

Answer 1

代码很奇怪（虽然正确），因为它告诉浏览器将不包含字母的元素的第一个字母大写。当元素内容的第一个字符不是字母时，浏览器对:first-letter的含义有不同的解释;在这个问题上，规范是模糊和模糊的。但这种古怪很奇怪。这可能很容易被规避，这是一个怪癖。据推测，当有一个插入内联元素时，IE 9试图确定第一个字母是疯狂的。

在我的IE 9上，页面在“标准模式”下显示为完全黑色。将浏览器切换到怪异模式会使页面显示正常。在您的情况下，可能使用IE 9的不同次要版本，浏览器可能以某种方式检测到在标准模式下操作时出现了问题，因此可以回到怪癖模式。

使用*a作为span元素内容，使IE 9正确显示“* A”页面。所以这个错误似乎是由一些罕见的事情组合引起的，这些事情通常不会发生 - 通常当你使用text-transform: capitalize时，是一个字母内的字母。

为什么IE9进入兼容模式的span +：first-letter + text-transform：capitalize？

1 个答案: