CSS Chrome Bug？顯示水平滾動條@ 100％表格單元格

我只是用HTML & CSS做第一步，但我想知道爲什麼只有Chrome顯示一個水平滾動條，而不應該顯示下面的代碼。請注意，條形圖僅以特定的縮放級別顯示。我想知道這是一個（已知的）錯誤還是我做錯了什麼？我目前的Chrome版本是26.0.1410.64。這是我的MWE：CSS Chrome Bug？顯示水平滾動條@ 100％表格單元格

<!DOCTYPE html> 

<html> 
    <head> 
     <style type="text/css"> 
     /* -------------- Setting Default values -------------- */ 
html, body, div, form, fieldset, legend, label { 
    margin: 0; 
} 

/* 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    body{ 
     margin-right: 0.05px; 
    } 
} 
*/ 

nav.main_nav { 
    display:table-cell; 
} 

div.content { 
    padding-left: 5px; /* <-- important */ 
    display:table-cell; 
    width: 100%; 
} 
     </style> 
    </head> 

    <body> 
     <nav class="main_nav"> 
      <ul> 
       <li><a href="/">Home</a></li> 
      </ul> 
     </nav> 

     <div class="content"> 
      <h2>Welcome</h2> 
     </div> 
    </body> 
</html>

來源

2013-05-18 Stefan K.

您正在使.content div 100％寬加5px。這是額外的5px導致滾動條。

來源

2013-05-18 11:29:46 Rob

爲什麼在所有縮放級別中不一致顯示hbar，而在FF或IE中完全沒有？例如，如果您使用背景色，您將如何讓內容單元填充整個hspace？ –

@StefanK。我糾正了我的答案。 – Rob

是的，這就是爲什麼我評論額外的5px在我的例子中是重要的... –

CSS Chrome Bug？顯示水平滾動條@ 100％表格單元格

回答

相關問題