text transform html,html5 – text-transform：uppercase导致Chrome上的布局错误

当内联块嵌套在块元素中时,我遇到了一个奇怪的布局错误,它似乎是由文本转换CSS属性触发的.我在Safari(5.1.2)上也看到了这个问题,但这个最小的测试用例只在Chrome上触发(17.0.963.56).

特别有趣的是,打开开发人员工具并将其保留在Elements选项卡上会触发正确的布局.我最好的猜测是CSS规则和DOM结构的组合导致webkit引擎错过执行页面的重排.

Menu Widget Test

.container

{

border: 1px solid black;

display: inline-block;

}

.title

{

text-transform: uppercase; /*

}

document.addEventListener("DOMContentLoaded",function() {

document.getElementById("firstName").innerHTML = "John";

document.getElementById("lastName").innerHTML = "Smith";

},false);

以下两个屏幕截图显示了它在Chrome上呈现的两种方式,具体取决于是否删除了文本转换规则,还是删除了div元素.

我想使用text-transform属性,但我想知道这是否是一个已知的bug以及我可以做些什么来确保我不触发该行为.即使能够明确触发回流事件也可能足够好.