2

が要素内にネストされているtext-transform場合にCSSプロパティによってトリガーされるように見える奇妙なレイアウトのバグに遭遇しました。Safari（5.1.2）でも問題が発生しましたが、この最小限のテストケースはChrome（17.0.963.56）でのみトリガーされます。inline-blockblock

特に興味深いのは、開発者ツールを開いて[要素]タブに保持すると、正しいレイアウトがトリガーされることです。私の推測では、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>

text-transformこれは、ルールが削除されたか、div要素が削除されたかに応じて、Chromeでレンダリングされる2つの方法を示す2つのスクリーンショットです。

左側のレンダリングが正しくない、右側が正しい

プロパティを使用したいの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>

404 でなくてもバグが存在することに注意してください。バグを確認するgray.pngには、ページを数回リロードする必要がある場合があります。また、http 経由でファイルを GET しない場合、バグは、最初にディスクからページをロードしたときに 1 回だけ表示されます。

css を微調整してバグを消すには、さまざまな方法があります。のみを削除すると、非表示にbackground-imageなります。のみを削除すると、非表示にdisplayなります。2つだけ削除text-transformすると、消えます。後者の場合、追加することで正しいレイアウトを実現できます

     e.style.textTransform = "uppercase";

もちろん、fillこれは非常に醜い回避策です。

于 2012-03-06T11:58:38.567 に答える