Как получить реальный размер блока на экране для WebKit?

Question

[jreznot]

Имеются два блока, занимающие 50% ширины экрана. В каждом из блоков есть два блока со 100% шириной, расположенные вертикально. Пример: jsfiddle.net/Xr73W/5. Если изменять ширину окна просмотра, то можно заметить, что рамки заголовков иногда рисуются меньше по ширине, чем контент. Под блоками приведены различные значения ширины блоков.

Как получить реальную ширину верхнего и нижнего блоков на экране при помощи JS для WebKit? Возможно есть какой-то рецепт, чтобы обойти этот артефакт?

Инструменты разработки в Chrome показывают неверную ширину (407px, хотя вся картинка 406px):


P.S. В Firefox всё отображается верно

Answer 1

[Артур Енокян]

если я правильно понял используй вот это
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}