text-transform：uppercase会导致Chrome上的布局错误 [英] text-transform: uppercase causes layout error on Chrome
问题描述
我遇到了一个奇怪的布局错误，似乎是由 text-transform CSS属性触发的。 inline-block 嵌套在块元素中。我在Safari（5.1.2）上也看到了这个问题，但这个最小的测试用例只在Chrome（17.0.963.56）上触发。
I've run across a strange layout bug that appears to be triggered by the text-transform CSS property when an inline-block is nested within a block element. I saw the problem on Safari (5.1.2) as well, but this minimal test case only triggers on Chrome (17.0.963.56).
打开开发人员工具并将其保留在元素选项卡上会触发正确的布局。我最好的猜测是CSS规则和DOM结构的组合导致webkit引擎错过执行页面的回流。
The particularly interesting bit is that opening the developer tools and keeping it on the Elements tab triggers the correct layout. My best guess is that the combination of CSS rules and DOM structure is causing the webkit engine to miss performing a reflow of the page.
<!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 元素已删除。
Here are two screenshots that show the two ways that it renders on Chrome, depending on whether or not the text-transform rule is removed, or the div element is removed.
我想使用 text-transform 属性，但我想知道这是一个已知的错误，我可以做什么，以确保我做不触发行为。
I would like to use the text-transform property, but I am wondering if this is a known bug and what I can do to ensure that I do not trigger the behavior. Even being able to explicitly trigger a reflow event might be good enough.
推荐答案
我有同样的问题，解决它与 white-space：nowrap; 。
I had the same problem and resolved it with white-space:nowrap;.
这篇关于text-transform：uppercase会导致Chrome上的布局错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
