爲什麼Safari5中存在一個意外的保證金？

我很好奇Safari 5.1上奇怪的渲染行爲。在兩列布局中，第一列的寬度固定，第二列的寬度應該是固定的。爲什麼Safari5中存在一個意外的保證金？

HTML：

<div class="row"> 
    <div class="left"> 
     <p>Left</p> 
    </div> 
    <div class="right"> 
     <p>Right. Some more text here, to show how odd the line breaks...</p> 
    </div> 
</div>

CSS：

.row { width: 300px; background: yellow; overflow: hidden; } 
.left { width: 100px; background: red; float: left; } 
.right { margin-left: 100px; background: green; overflow: hidden; }

這對大多數瀏覽器的偉大工程（在所有「現代」的瀏覽器，因爲我認爲），但現在我發現Safari 5在與預期左邊距相同寬度的第二列上添加了無意的右邊距（就像有.right { margin-right: 100px; }規則一樣）。

http://jsfiddle.net/MvF3V/1

大多數瀏覽器：

enter image description here

Safari5：（上5.1.7測試，但它也發生在5.1.9）

enter image description here

當我刪除overflow: hidden;它工作正常，但我需要其他內部元素。

我的問題不在於如何重新安排這個小例子，但是：

這是一個Safari瀏覽器5的Bug，或者是我的CSS規則在某種程度上錯的，即使在最他們的「工作」瀏覽器？
如果它是一個錯誤，它是否有一個名稱，我可以谷歌一些解決方法？
我能否以某種方式檢測哪些瀏覽器受此行爲影響，爲它們定義一些例外規則。

更新：標準的Android瀏覽器（銀河S3，爲AppleWebKit 534.30）似乎使用同樣的老的WebKit引擎。出現同樣奇怪的右頁邊距：http://jsfiddle.net/MvF3V/1/embedded/result/

來源

2014-01-17 Beat Sprenger

您需要溢出：隱藏清除浮動。對？ – Era

@Era：沒錯。我喜歡用'overflow：hidden'來清除浮動內容。我可以使用clearfix解決方案，但我仍然很好奇，爲什麼會出現這種奇怪的渲染。 –

這可能是safari的一個bug。是的，你可以做這個替代http://jsfiddle.net/MvF3V/2/ – Era

這似乎的確是中老年的Webkit版本的bug。我發現another question關於同樣的問題。

有解決方法。最明顯的是避免overflow: hidden清除花車，並使用clearfix來代替。

由於沒人接我的問題，我儘量給他們自己：

這是一個野生動物園5漏洞？

這是一個錯誤的Webkit

如果它是一個Bug，它有一個名字，與我可以谷歌一些解決方法？

沒有找到名稱，顯然沒有很多人佈置網站，因爲我這樣做（並且仍然希望支持舊瀏覽器）。

我可以通過某種方式檢測哪個瀏覽器受到此行爲的影響，爲它們定義一些例外規則。

如果你真的要定義例外，您可以在JavaScript

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent); 
if (webkitCheck) { 
    var webkitVersion = parseFloat(webkitCheck[1]); 
    if (webkitVersion < 535) { 
     jQuery('html').addClass('oldWebkit'); 
    } 
}

< 535做出這樣醜陋的東西，因爲534.59.10是最新版本Safari5的Webkit的版本，並在Safari6，這錯誤不再發生。

但是，謝謝@Era和@NoobEditor的評論。

來源

2014-01-23 18:59:56

給代替

padding-left: 100px;

margin-left: 100px;

來源

2014-01-17 12:33:15

但是這會在我的右列中添加填充（請參閱http://jsfiddle.net/MvF3V/3/），這不是我想要的。我設置了「margin-left：100px」，以避免右列的內容浮動在左列周圍，如果右列高於左列。 –

爲什麼Safari5中存在一個意外的保證金？

回答

相關問題