为什么IE9会以span + :first-letter + text-transform:capitalize进入兼容模式？
下面是一个简单的测试用例：
<!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>，则可以正常工作。如果它更改为带有display:inline的<div> (与span相同)，那么它将再次重新加载页面。如果*更改为 ，则一切正常，即使在<span>中也是如此。那么IE9在这段代码中不喜欢什么呢？
回答 1
Stack Overflow用户
发布于 2012-12-24 23:27:17
这段代码很奇怪(虽然正确)，因为它告诉浏览器将不包含字母的元素的第一个字母大写。当元素内容的第一个字符不是字母时，浏览器对:first-letter的含义有不同的解释；在这个问题上，规范是模糊和晦涩的。但这种奇怪之处非常奇怪。这是一种可以很容易规避的怪癖。大概，当有一个插入元素时，IE9会疯狂地尝试确定第一个字母。
在我的IE 9上，页面在“标准模式”下显示为完全黑色。将浏览器切换到quirks模式会使页面显示正常。在您的情况下，可能使用IE9的不同次要版本，浏览器可能会以某种方式检测到在标准模式下操作时存在错误，因此会退回到quirks模式。
使用*a作为span元素内容可以使IE9正确显示带有“*A”的页面。因此，这个bug似乎是由一种罕见的、通常不会发生的事情组合引起的--当您使用text-transform: capitalize时，通常元素内部会有一个字母。
https://stackoverflow.com/questions/14019572
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号