Почему Chrome переносит элементы встроенного списка больше, чем Firefox или IE?

Question

Я обновлял шаблон до HTML5 и столкнулся со странной проблемой с Chrome.Я поместил неупорядоченные списки в элементы

для меню и добавил отступы, чтобы немного отделить их.Ширина

достаточна для того, чтобы вместить все элементы списка во всех трех браузерах моей системы: IE9, FF5 и Chrome (текущий).

Однако Chrome - единственный, который переноситэлементы в две строки.

Вот макет теста:

http://www.tubbs.org.uk/html5/

Есть идеи о том, что здесь происходит?

(яКстати, известно о многих, многих ошибках, связанных с использованием таблицы стилей DokuWiki до того, как ее цвета прошли через препроцессор.)

Answer 1

http://www.tubbs.org.uk/html5/

В бета-версии Firefox 6.0 также не работает верхняя строка.

Одна вещь, которую я заметил, это то, что вы используете процентное заполнение, которое, как правило, является плохой идеей для кросс-браузерной совместимости.

Попробуйте вместо этого использовать значение px для отступа: 0 10px против 0 1,5%

Answer 2

Похоже, что Chrome применяет заполнение из двух разных правил: nav.main li (3%), если он отключен, он применяет заполнение из nav li (1,5%).Если оба эти правила отключены, все они отображаются в одной строке.

Вероятно, именно так webkit интерпретирует строку padding :.Вы можете попробовать сделать padding-left, padding-right и посмотреть, поможет ли это.

Вы также можете использовать набор инструментов разработчика Chrome (Ctrl + shift + I) и использовать его для включения или отключения различных стилей, чтобы увидеть, как они применяются.