当内联块嵌套在块元素中时,我遇到了一个奇怪的布局错误,它似乎是由文本转换CSS属性触发的.我在Safari(5.1.2)上也看到了这个问题,但这个最小的测试用例只在Chrome上触发(17.0.963.56).
特别有趣的是,打开开发人员工具并将其保留在Elements选项卡上会触发正确的布局.我最好的猜测是CSS规则和DOM结构的组合导致webkit引擎错过执行页面的重排.
<!DOCTYPE html>
<html>
<head>
<title>Menu Widget Test</title>
<style type="text/css">
.container
{
border: 1px solid black;
display: inline-block;
}
.title
{
text-transform: uppercase; /* <-- Remove this and it works */
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function() {
document.getElementById("firstName").innerHTML = "John";
document.getElementById("lastName").innerHTML = "Smith";
},false);
</script>
</head>
<body>
<div> <!-- Remove this DIV element,and it works -->
<span class="container">
<span class="title">
<span id="firstName"></span>
<span id="lastName"></span>
</span>
</span>
</div>
</body>
</html>
以下两个屏幕截图显示了它在Chrome上呈现的两种方式,具体取决于是否删除了文本转换规则,还是删除了div元素.
我想使用text-transform属性,但我想知道这是否是一个已知的bug以及我可以做些什么来确保我不触发该行为.即使能够明确触发回流事件也可能足够好.
解决方法
我遇到了同样的问题并用白色空间解决了它：Nowrap;.