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元素被刪除的兩種方式。

Bad rendering on the left, correct on the right

我想用text-transform財產，但我想知道如果這是一個已知的bug和我能做些什麼，以確保我不觸發行爲。即使能夠明確觸發迴流事件也可能足夠好。

來源

2012-02-23 Lucas

做同樣的事情發生如果yopu不使用JS寫出名稱？ – 2012-02-23 22:21:02

我已將您給出的代碼複製到一個新的HTML文件中，我將其放在本地wampserver上，並用鉻瀏覽器（17.0.963.56）將其打開，並且它工作正常。 – 2012-02-23 22:28:40

@Darko Z：不，這就是爲什麼我沒有注意到它一段時間。將內容放在'firstName'和'lastName'中跨越邊框元素內的大寫文字。 – Lucas 2012-02-23 22:29:46

似乎有加載的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，您可能必須重新加載頁面的幾個時間來見證的bug。另外，如果您沒有通過http獲取文件，則只會在第一次從磁盤加載頁面時顯示錯誤一次。

有多種方法可以通過調整css來使bug消失。只刪除background-image使其消失。只刪除display使其消失。刪除只有兩個text-transform使它消失。在後者的情況下，正確的佈局可以通過在fill函數，它是，當然，一個非常難看的解決方法的末尾添加

 e.style.textTransform = "uppercase";

來實現。

來源

2012-03-06 11:58:38

我有同樣的問題，並與white-space:nowrap;解決它。

來源

2013-07-07 02:06:13 Phil

text-transform：大寫會導致Chrome上的佈局錯誤

回答

相關問題