我遇到了一个奇怪的布局错误,当 an嵌套在元素中时,它似乎是由text-transform
CSS 属性触发的。我也在 Safari (5.1.2) 上看到了这个问题,但是这个最小的测试用例只在 Chrome (17.0.963.56) 上触发。inline-block
block
特别有趣的一点是,打开开发人员工具并将其保留在 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 上呈现的两种方式,具体取决于是否text-transform
删除了规则或div
元素。
我想使用该text-transform
属性,但我想知道这是否是一个已知错误以及我能做些什么来确保我不会触发该行为。即使能够显式触发回流事件也可能已经足够了。