Chrome a Safari nesprávne vypočítajú okraje, keď je dieťa širšie než rodič - javascript, jquery, webkit

Tu je príklad (zobrazí sa výstražné pole s výsledkami). Spustite ho v prehliadači Firefox a potom v prehliadači Chrome a / alebo Safari

http://jsfiddle.net/QeaVM/

Všimnite si, ako FF správne zahrňuje ľavý a pravý okraj do výpočtu vonkajšej šírky. Všimnite si, ako Safari / Chrome nesprávne uvádza, že vonkajšia šírka #Container sa rovná šírke #Frame.

Všimnite si tiež, že Safari / Chrome nesprávne hlási #Container's margin-right ako záporné číslo, keď je explicitnosť nastavená na 300px

Je to chyba vo web-súprave alebo jquery?

odpovede:

pri pohľade na stránku v inšpektoroch pre oba prehliadače (úplne ignorujúci javascript) môžete vidieť rovnaké rozdiely (takže vylučuje jQuery).

Vyzerá to čudne a zdá sa, že je hlásený problém s webkitom.

https://bugs.webkit.org/show_bug.cgi?id=13343

https://bugs.webkit.org/show_bug.cgi?id=24511

Komentáre spomínajú riešenie „Riešením je nastavenie prvku na zobrazenie: žiadny (alebo vložený blok), meranie okraja a nastavenie zobrazenia späť na blok.“