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要素が除去されているか否かに応じて、2つの方法を示し2つのスクリーンショットです。

Bad rendering on the left, correct on the right

私はtext-transformプロパティを使用したいと思いますが、これは既知のバグと私は私が行動を誘発しないことを確実にするために行うことができている場合、私は疑問に思って。明示的にリフローイベントを発生させることさえ可能であるかもしれません。

出典

2012-02-23 Lucas

yopuがJSを使用して名前を書き出していない場合、同じことが起こりますか？ –

あなたが与えたコードをローカルのwampserverに置いた新しいhtmlファイルにコピーしました。クロムブラウザ（17.0.963.56）で開いたので、うまくいきます。 –

@Darko Z：いいえ、私はしばらくそれに気付かなかったのです。 'firstName'と' lastName'スパンにコンテンツを配置すると、大文字のテキストが枠内の要素の中にレンダリングされます。 – Lucas

CSSの読み込みには一種の競合状態があるようです。次のファイルは、osx 10.6.8のChrome（17.0.963.65）のバグを再現しています。バグがgray.pngが404でない場合でも、あなたがページにバグを目撃するためにいくつかの時間をリロードする必要があります存在していることを

<!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>

注意。また、httpでファイルを取得しないと、バグはディスクから初めてページをロードするときに一度しか表示されません。

CSSを調整することでバグを消す方法はいろいろあります。 background-imageのみを削除すると消えます。 displayのみを削除すると消えます。 2つだけを取り外すと、それは消滅します。後者の場合、正しいレイアウトはもちろん、非常に醜い回避策であるfill関数の終了時に

 e.style.textTransform = "uppercase";

を添加することによって達成することができます。

出典

2012-03-06 11:58:38

私は同じ問題を抱えており、white-space:nowrap;で解決しました。

出典

2013-07-07 02:06:13 Phil

text-transform：大文字でChromeでレイアウトエラーが発生する

答えて

関連する問題