text-transform：大写会导致Chrome上的布局错误

我运行了一个奇怪的布局错误，当inline-block嵌套在block元素中时，该错误似乎是由text-transform CSS属性触发的。我也在Safari（5.1.2）上看到了这个问题，但这个最小的测试用例仅在Chrome（17.0.963.56）上触发。text-transform：大写会导致Chrome上的布局错误

特别有趣的是，打开开发人员工具并将其保留在元素选项卡上会触发正确的布局。我最好的猜测是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元素被删除的两种方式。

Bad rendering on the left, correct on the right

我想用text-transform财产，但我想知道如果这是一个已知的bug和我能做些什么，以确保我不触发行为。即使能够明确触发回流事件也可能足够好。

来源

2012-02-23 Lucas

做同样的事情发生如果yopu不使用JS写出名称？ – 2012-02-23 22:21:02

我已将您给出的代码复制到一个新的HTML文件中，我将其放在本地wampserver上，并用铬浏览器（17.0.963.56）将其打开，并且它工作正常。 – 2012-02-23 22:28:40

@Darko Z：不，这就是为什么我没有注意到它一段时间。将内容放在'firstName'和'lastName'中跨越边框元素内的大写文字。 – Lucas 2012-02-23 22:29:46

似乎有加载的CSS中的一种竞争条件。以下文件在osx 10.6.8上的Chrome（17.0.963.65）中重现了此处的错误。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Schizophrenic layout</title> 
    <style type="text/css"> 
     body { background-image:url('gray.png'); } 
     #d0{display:inline-block;} 
     #d1{text-transform:uppercase;} 
     #d2{text-transform:uppercase;} 
    </style> 
    <script type="text/javascript"> 
     function fill (id, text) 
     { 
     var e = document.getElementById (id); 
     var t = document.createTextNode (text); 
     e.appendChild (t); 
     } 

     function main() 
     { 
     fill ("d1", "First line"); 
     fill ("d2", "Second line"); 
     } 
     window.onload = main; 
    </script> 
    </head> 
    <body> 
    <div id="d0"> 
     <div id="d1"></div> 
     <div id="d2"></div> 
    </div> 
    </body> 
</html>

注意，错误存在，即使gray.png不是404，您可能必须重新加载页面的几个时间来见证的bug。另外，如果您没有通过http获取文件，则只会在第一次从磁盘加载页面时显示错误一次。

有多种方法可以通过调整css来使bug消失。只删除background-image使其消失。只删除display使其消失。删除只有两个text-transform使它消失。在后者的情况下，正确的布局可以通过在fill函数，它是，当然，一个非常难看的解决方法的末尾添加

 e.style.textTransform = "uppercase";

来实现。

来源

2012-03-06 11:58:38

我有同样的问题，并与white-space:nowrap;解决它。

来源

2013-07-07 02:06:13 Phil

text-transform：大写会导致Chrome上的布局错误

回答

相关问题