Переполнение: скрытая путаница с полями в Chrome и Safari

Question

Я настроил некоторые div для своего макета, основного div и div меню.

Они отлично выглядят в Firefox, но по какой-то причине Chrome и Safari перепутались.

По какой-то причине ширина div уменьшается при добавлении overflow:hidden; в CSS.Мне нужно overflow:hidden;, хотя, потому что у меня есть другие плавающие внутри основного div.Вы можете увидеть пример здесь:

http://jsfiddle.net/kR7rs/2/

Он хорошо отображается в Firefox, но в Safari и Chrome также есть поле с правой стороны div.

Answer 1

Удаление поля из main, кажется, исправит это:

http://jsfiddle.net/kR7rs/3/

Что я думаю, так это то, что когда установлено overflow:hidden, весь элемент обтекает плавающие элементы вместо текста внутри div. Так что это дает результат в скрипке. Затем, если вы также установите поле для него, ширина будет уменьшена с помощью левого отступа.

Вроде как ошибка.

(Сейчас у вас нет FF, чтобы проверить его и посмотреть, не сломается ли он для FF.)

Answer 2

Переместить overflow:hidden в #wrapper.Это исправляет, но не объясняет почему.