Почему в Safari5 есть непредвиденная разница?

Question

Мне любопытно о нечетном режиме рендеринга в Safari 5.1. В двухколоночном макете первый столбец имеет фиксированную ширину, а второй - оставшуюся часть.

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

Большинство браузеры:

Safari5: (проверено на 5.1.7, но это происходит также и на 5.1.9)

Когда я удаляю overflow: hidden;, он отлично работает, но мне нужно это для других внутренних элементов.

Мои вопросы не то, как изменить этот маленький пример, но:

1. Является ли это Сафари-5-Bug, или мои правила CSS как-то не так, даже если они «работают» на большинстве браузеры?
2. Если это ошибка, есть ли у нее имя, с помощью которого я могу использовать некоторые обходные пути?
3. Могу ли я каким-то образом обнаружить, какие браузеры затронуты этим поведением, чтобы определить для них некоторые правила исключения.

Update: стандартный Android-браузер (Galaxy S3, AppleWebKit 534,30), кажется, использует тот же самый старый WebKit двигатель. появляется же странно правый край: http://jsfiddle.net/MvF3V/1/embedded/result/

Answer 1

Это, кажется, на самом деле быть ошибка в старых версиях Webkit. Я нашел another question по той же проблеме.

Обходные пути. Наиболее очевидным является избегать overflow: hidden, чтобы очистить поплавки и вместо этого использовать clearfix.

Поскольку не ответил на мои вопросы никто, я стараюсь дать им себя:

Является ли это Сафари-5-Bug?

Это WebKit ошибка

Если это ошибка, у него есть имя, с помощью которого я могу Google обходных путей?

Не найдено ни одного имени, видимо, не так много людей, которые компоновали сайты так же, как я ... (и все еще хотят поддерживать старые браузеры).

Могу ли я каким-то образом определить, какие браузеры затронуты этим поведением, чтобы определить для них некоторые правила исключения.

Если вы действительно хотите, чтобы определить исключения, вы можете сделать такие уродливые вещи в 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 является версия Webkit последней версии Safari5, и в Safari6, это ошибка больше не встречается.

Но спасибо, @Era и @NoobEditor за ваши комментарии.

Answer 2

Дайте

padding-left: 100px; 

вместо

margin-left: 100px;