Dépassement: déconnection cachée avec les marges dans Chrome et Safari

Question

J'ai mis en place des divs pour ma disposition, une div principale et une div de menu. Ils ont l'air parfaits dans Firefox, mais pour une raison quelconque, Chrome et Safari se foirent.

Pour une raison quelconque, la largeur du div diminue lorsque overflow:hidden; est ajouté au CSS. J'ai besoin de overflow:hidden; cependant, parce que j'ai d'autres flotteurs à l'intérieur de la div principale. Vous pouvez voir l'exemple ici:

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

Il apparaît bien dans Firefox, mais dans Safari et Chrome, il y a une marge sur le côté droit de la div ainsi.

Answer 1

Retrait de la marge de main semble fixer:

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

Ce que je pense qu'il se passe est que lorsque overflow:hidden est réglé, l'enveloppe élément entier autour des flotteurs au lieu du texte au sein de la div. Donc, cela donne le résultat dans le violon. Ensuite, si vous définissez une marge sur elle aussi, la largeur est encore réduite par le remplissage à gauche.

Cela ressemble à un bug.

(Ne pas avoir FF dès maintenant pour le tester et voir si elle ça casse pour FF.)

Answer 2

Déplacer overflow:hidden à #wrapper. Cela le fixe, mais n'explique pas pourquoi.