Проблема совместимости в браузерах Mac

Question

Я создаю небольшой веб-сайт ( вы можете увидеть его здесь ), но у меня возникают конфликты с чем-то, переходящим от веб-браузеров на базе Mac к браузерам на ПК. Кажется, он появляется во всех браузерах Mac, а не в браузерах ПК. Я протестировал Safari и Firefox на Mac и Firefox / Internet Explorer на ПК.

Слева изображение с ПК, справа изображение с Mac. Как вы можете видеть, в меню находится промежуток в один пиксель или около того. Меню должно быть вровень с основным содержанием.

Почему он это делает? Я перепробовал все, что мог придумать, но безуспешно.

Answer 1

Все довольно просто. Ваш стиль <div id="menu"> должен быть 50px ростом. Но высота <ul> внутри него зависит от метрики шрифта, как и высота его дочерних элементов (которые имеют фон). Таким образом, в зависимости от используемых шрифтов и алгоритма растеризации шрифта, высота будет варьироваться. В то же время вы добавляете некоторое верхнее поле, которое пытается сделать так, чтобы прямоугольники находились на одном уровне с прямоугольником ниже ... но размер этого поля должен зависеть от точного размера текста.

У вас есть несколько вариантов. Вы можете переключиться на автоматическую высоту в меню и прекратить использовать поплавки, чтобы расположить вещи рядом друг с другом; используйте display:inline-block вместо этого. Вы можете переключиться на автоматическую высоту в меню и использовать очистку, чтобы убедиться, что меню достаточно высокое, чтобы содержать поплавки. Вы можете явно установить больше высоты и высоты строки, чтобы убедиться, что все будет складываться независимо от того, какой шрифт (но это будет ужасно ломаться для некоторых пользователей; ваша высота 50px просто не будет работать для пользователя, который использует шрифт 60px потому что они не очень хорошо видят).

Answer 2

Попробуйте установить высоту строки списка в меню на 16 пикселей.

#menu ul {
line-height: 16px;
}