css webkit的bug：堆疊的浮動寬度爲0，隱藏溢出

這個標記顯示了我的問題： Webkit瀏覽器似乎在浮動/溢出的浮動父元素上創建了一個錯誤的寬度：當它們的寬度設置爲0時有沒有已知的解決方法？css webkit的bug：堆疊的浮動寬度爲0，隱藏溢出

<!DOCTYPE html> 
<html> 
<head> 
    <title>float & width</title> 
    <style type="text/css"> 

     div { 
      float: left; 
      height: 50px; 
     } 

     div.section { 
      background-color: green; 
     } 

     div.section div.content { 
      background-color: red; 
      overflow: hidden; 
     } 

     p { 
      clear: both; 
     } 

    </style> 
</head> 
<body> 
<p>width: 0 => Bug</p> 
<div class="section"> 
    <div class="content" style="width: 0;">some content that should not affect the parent div's width.</div> 
</div> 
<p>width: 1px => good</p> 
<div class="section"> 
    <div class="content" style="width: 1px;">some content that should not affect the parent div's width.</div> 
</div> 
</body> 
</html>

來源

2010-10-13 Jan

這真的很有意思。我嘗試了很多與CSS的主題變化，並得到了相同的結果。如果元素的樣式中任何位置的寬度爲0，則該元素的所有樣式都將被忽略。我查看了標準和指南，找不到任何說瀏覽器應該用零或負值寬度來做的事情。有一件事它不應該做的是使其他一切無效，所以這絕對是webkit中的一個錯誤。 – 2010-10-14 01:15:10

我看了一下webkit的bugzilla，還發現了幾個類似的bug。不幸的是前段時間（幾年）和目前的夜間仍然有這個錯誤。似乎我將不得不訴諸一些骯髒的詭計:(:(我認爲這是一個獨家） – Jan 2010-10-15 15:02:24

通過給外部元素一些寬度，可以獲得一致的行爲（至少在webkit和gecko之間）。一點拖動，但可行。

來源

2010-10-15 22:50:37 Jan

您是否啓用了文檔類型？截至目前頁面處於怪癖模式。

來源

2010-10-13 01:30:17

是的，我這樣做。我更新了代碼。不幸的是，Doctype沒有任何效果。 – Jan 2010-10-13 01:35:20

css webkit的bug：堆疊的浮動寬度爲0，隱藏溢出

回答

相關問題