1

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

<!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>with display:inline（与 span 相同），则它会再次重新加载页面。如果*更改为&nbsp;，则一切正常，即使在<span>. 那么 IE9 在该代码中不喜欢什么？

4

1 回答 1

0

代码很奇怪（尽管是正确的），因为它告诉浏览器将不包含字母的元素的第一个字母大写。:first-letter当元素内容的第一个字符不是字母时，浏览器有不同的解释；在这件事上，规范模糊不清。但这种怪异是非常奇怪的。这是一个很容易被规避的怪癖。据推测，IE 9 在尝试确定第一个字母时有一个插入的内联元素。

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

使用*a作为span元素内容使 IE 9 正确显示带有“*A”的页面。因此，该错误似乎是由通常不会发生的罕见组合引起的——通常在您使用text-transform: capitalize.

于 2012-12-24T15:27:16.860 回答