Question

当text-transform嵌套在inline-block元素中时，我遇到了一个奇怪的布局错误，似乎是由block 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上呈现的两种方式，具体取决于是否删除了text-transform规则，还是删除了div元素。

Bad rendering on the left, correct on the right

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

Answer 1

我遇到了同样的问题并使用white-space:nowrap;解决了这个问题。

Answer 2

在加载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，也会出现错误。您可能需要重新加载页面几次以查看错误。此外，如果您不通过http获取文件，则该错误仅在您第一次从磁盘加载页面时显示一次。

通过调整css，有各种方法可以让bug消失。仅删除background-image会使其消失。仅删除display会使其消失。仅删除两个text-transform会使其消失。在后一种情况下，可以通过添加

来实现正确的布局

     e.style.textTransform = "uppercase";

在fill函数的末尾，这当然是一个非常难看的解决方法。

text-transform：uppercase导致Chrome上的布局错误

2 个答案: