text-transform: uppercase causes layout error on Chrome

依然范特西╮ 提交于 2019-11-29 08:38:06
Phil

I had the same problem and resolved it with white-space:nowrap;.

There seem to be a kind of race condition in the loading of css. The following file reproduces the bug here on Chrome (17.0.963.65) on osx 10.6.8.

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

Note that the bug is present even if gray.png is not a 404. You may have to reload the page a few time to witness the bug. Also if you don't GET the file over http, the bug shows only once, the first time you load the page from the disk.

There are various ways to make the bug disappear by tweaking the css. Removing only the background-image makes it disappear. Removing only the display makes it disappear. Removing only the two text-transform make it disapear. In the latter case the correct layout can be achieved by adding

     e.style.textTransform = "uppercase";

at the end of the fill function which is, of course, a very ugly workaround.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!