2

我遇到了一个奇怪的布局错误，当 an嵌套在元素中时，它似乎是由text-transformCSS 属性触发的。我也在 Safari (5.1.2) 上看到了这个问题，但是这个最小的测试用例只在 Chrome (17.0.963.56) 上触发。inline-blockblock

特别有趣的一点是，打开开发人员工具并将其保留在 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属性，但我想知道这是否是一个已知错误以及我能做些什么来确保我不会触发该行为。即使能够显式触发回流事件也可能已经足够了。

4

2 回答 2

1

我遇到了同样的问题并用white-space:nowrap;.

于 2013-07-07T02:06:13.077 回答
0

在加载 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，该错误也存在。您可能需要重新加载页面几次才能看到该错误。此外，如果您不通过 h​​ttp 获取文件，则该错误仅显示一次，即您第一次从磁盘加载页面时。

有多种方法可以通过调整 css 使 bug 消失。仅删除background-image使其消失。仅删除display使其消失。仅删除两个text-transform使其消失。在后一种情况下，可以通过添加来实现正确的布局

     e.style.textTransform = "uppercase";

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

于 2012-03-06T11:58:38.567 回答