Я пытаюсь создать сайт, который использует сложенные по бокам «лезвия» контента.Содержащий их элемент перемещается в боковом направлении внутри элемента div с помощью overflow-x: hidden, чтобы создать желаемый эффект боковой прокрутки.Кажется, это работает нормально: элемент, содержащий «блейды», установлен на display: table; width: 100%; table-layout: fixed, а каждый блейд имеет следующий стиль: display: table-cell; width: 601px; border-right: 1px solid white; padding: 10px.Наконец, элемент nav имеет ширину 621px, без горизонтальных отступов или полей.
Все это кажется достаточно простым, но я получаю очень странную кросс-браузерную ошибку: Firefox и IE9 согласны с тем, как выглядит страницаНо у Chrome другое мнение.Я выяснил что делает Chrome, но я не смог выяснить почему это делает.
Набор doctype и все остальное кажетсяработать нормально.За исключением фоновых цветов, все вышеперечисленные правила определены в таблице стилей, и встроенных стилей нет.Вот несколько скриншотов, которые иллюстрируют поведение проблемы.
Вот страница в Firefox - по желанию, правый край панели навигации совпадает с правым краем поля содержимого.
То же в IE9.
В Chrome отступ вычитается из ширины, создавая показанный выступвыше.Я никогда не устанавливал border-box где-либо в таблице стилей, и при этом я не вижу его в вычисленных правилах в Chrome - он просто говорит, что ширина равна 581px, тогда как в двух других браузерах она равна 601px.
[Примечание:Я видел, что были другие посты по вопросам заполнения, но ни в одном из них Firefox и IE9 не соглашались, а Chrome делал что-то другое.