Проблема с межбуквенным интервалом / разница между браузерами

У меня возникла проблема с веб-сайтом, над которым я работаю, и я не могу найти какое-либо решение. Проблема, с которой я столкнулся, связана с верхним меню сайта: хотя оно выглядит нормально в большинстве браузеров, есть несколько из них, где меню «ломается», добавляя дополнительную строку с последним элементом.

Я исследовал, что может быть причиной этого, и проблема, похоже, заключается в том, как браузеры обрабатывают интервалы между буквами. Некоторые браузеры, особенно мобильные, похоже, добавляют дополнительный пиксель между символами, из-за чего содержимое заголовка не помещается в его пространство. Это происходит даже тогда, когда межбуквенный интервал установлен равным нулю для всего сайта: некоторые браузеры, кажется, просто добавляют дополнительный пробел, поэтому то, что большинство браузеров использует как ноль, будет для них -1.

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

Речь идет об этом веб-сайте:

http://maxworth.ca/blog/

Вы можете увидеть проблему, используя хром регулярно (он будет выглядеть нормально), а затем с помощью инструментов разработчика хрома отобразить сайт как Android 4.0.2 - Galaxy Nexus. Проблема, похоже, возникает в нескольких (в основном мобильных) браузерах, и, хотя я знаю, что код сайта не был точно закодирован, чтобы выглядеть идеально в мобильных браузерах, это единственная проблема, которая ломает игру, которая у нас есть в настоящее время.

Заранее спасибо.


person Tizzy    schedule 23.09.2013    source источник
comment
В вашем документе есть бродячий закрывающий тег div.   -  person Milche Patern    schedule 23.09.2013
comment
Вы установили свойство font-family?   -  person mdesdev    schedule 23.09.2013
comment
Вопрос должен содержать минимальное количество кода, необходимого для воспроизведения проблемы. Одной ссылки недостаточно, особенно когда она указывает на действующую страницу, где проблема, предположительно, будет устранена после того, как будет найдено решение.   -  person Jukka K. Korpela    schedule 23.09.2013
comment
Исправлена ​​лишняя вещь ‹/div›. И да, семейство шрифтов настроено правильно. Эта проблема возникает независимо от используемого шрифта (я пытался изменить его на Arial, то же самое), поэтому я не думаю, что это шрифт.   -  person Tizzy    schedule 23.09.2013


Ответы (1)


Я думаю, что хороший подход к этому состоит в том, чтобы ваши пункты меню «оправдывались» для заполнения ширины вашего контейнера, независимо от размера шрифта, межбуквенного интервала и т. д., вместо того, чтобы пытаться манипулировать элементами, чтобы заполнить пространство. Каждый браузер отображает текст немного по-своему, поэтому очень сложно получить единообразный вид. Это решение работает очень хорошо: Как обосновать горизонтальный список?

person Kate McCubbins    schedule 23.09.2013
comment
Вроде получилось, спасибо. Тем не менее, я боюсь, что это может быть невозможно для других сайтов Wordpress - в этом конкретном случае использовалось жестко закодированное меню, поэтому добавление дополнительного div в конце не было проблемой. Тем не менее, какие-либо подсказки о том, как я могу это сделать при использовании динамического меню, как это делают большинство CMS? - person Tizzy; 23.09.2013
comment
Возможно, вы могли бы сделать добавление с помощью jQuery? - person Kate McCubbins; 23.09.2013
comment
Думал либо об этом, либо использовать: after в css, хотя опция css может сломаться. Я проверю это, когда снова столкнусь с этой проблемой. Спасибо :) - person Tizzy; 23.09.2013
comment
Да, :after не будет поддерживаться старыми браузерами IE, поэтому я, вероятно, выберу JS. Удачи :) - person Kate McCubbins; 23.09.2013