Простое свойство поля отображается правильно в IE и FireFox, но не в Chrome

Question

Два основных блока контейнера (один с квадратными плитками / пунктами меню) и верхний блок выше имеют одинаковую ширину и правильно выстроены во всех браузеры, кроме Chrome.

Это вызвано тем, что Chrome не отображает следующее свойство margin точно по какой-то причине. Поместить поле справа на 4px of получает правильную ширину, но это нарушит компоновку в Explorer и FireFox. Понятия не имею, что вызывает это. Смотрите скрипку для живого примера. Просто вытяните рамки чтобы увидеть все это.

 DIV.RootCell
{
 width: 134px;
 height: 120px;
 margin-right: 3px;     //<-------------
 display:inline-block;
 float:left;

}

http://jsfiddle.net/yHxsS/7/

Answer 1

И Firefox, и Chrome отключены на 1 px для меня. Проблема, которую я вижу, заключается в следующем:

Ширина верхнего поля составляет 937 пикселей.

Сетка ниже содержит 7 элементов. Каждый имеет ширину 134 пикселя с правым полем 3 пикселя. Это означает, что вы получаете (134x7) + (3x6) в качестве видимой ширины. Когда вы делаете математику, получается ширина 956 пикселей, что меньше, чем заявлено для верхней коробки. Если вы установите верхний блок размером 936 пикселей, он должен работать как в Chrome, так и в Firefox.

И вы можете видеть, что изменения работают как в Chrome, так и в Firefox здесь: http://jsfiddle.net/jfriend00/bdP8p/1/

Кроме того, проверьте уровень масштабирования вашего браузера и убедитесь, что он на 100%. Я заметил, что ваш макет чувствителен к масштабированию браузера, так как он сбивается при увеличении или уменьшении (что угодно, кроме 100%).