Firefox CSS интервалы проблемы перекрестной ос

Question

У меня проблема с Firefox.В Windows он отображается иначе, чем в OSX.Похоже, это проблема расстояния между шрифтами или размера шрифта, но я не могу понять это.Оба используют одни и те же свойства.

Верхнее окно: Mac OSX, внизу: WinXP

Вот основной HTML / вычисленный стиль:

Есть идеи у кого-нибудь?

Answer 1

Скорее всего, вы видите дельту из-за выбранного шрифта.Существует всего несколько шрифтов, которые распространены в Windows и Mac, некоторые из которых (Lucida Sans / Lucida Sans Unicode) содержат разные кернинги на этих платформах.

Было бы очень полезно увидеть шрифт CSSинформация для рассматриваемых элементов.

Решения (при условии, что это проблема кернинга, упомянутая выше):

1. Выберите шрифт, который лучше кернинг на обеих платформах.В этом случае Arial может хорошо работать.

2. Выберите более узкий шрифт и убедитесь, что он работает на обеих платформах.

3. Убедитесь, что дизайн можетразместить дополнительную ширину.Я думаю, вы обнаружите, что у вас есть проблема в Windows, если у вас есть 10 товаров в вашей корзине или цена превышает 100 долларов.

Вы можете использовать cufon для этого, но я небольшой поклонник этого из-за проблем лицензирования и печати.Вы можете довольно дешево приобрести шрифт у кого-то вроде MyFonts.

Answer 2

Если вы надеетесь создать лучший кроссбраузерный интерфейс, несколько настроек CSS сделают макет более щадящим и уменьшат разницу в визуализации шрифтов.

Например, чтобы улучшить текущую разметку, вы должны:

• Float или абсолютно позиция <div class="topNav"> вверху справа от родительского элемента
• Выровнять по правому краю весь текст в пределах topNav

Это гарантирует, что ваша верхняя навигация всегда будет расти влево и не будет выходить за пределы страницы справа (как показано на нижнем скриншоте Windows XP / Firefox).

После этого изменения различия шрифтов будут уменьшены, поскольку макет может увеличиваться или увеличиваться, в то время как изменения cartNav не нарушат макет.

Пока вы вносите эти изменения, вы можете рассмотреть возможность объединения значков суб-навигации в CSS Sprite .

Как веб-разработчики, мы привыкли к тестированию браузеров и несоответствиям рендеринга, но учтите, что вряд ли кто-либо, кроме вас, (может, конечно, коллега-разработчик или клиент) будет когда-либо сравнивать способ Сайт отображается между браузерами или операционными системами.

Answer 3

различия в кернинге шрифтов между ОС выглядят так. Это ОЧЕНЬ хакерский, но если вы не можете использовать шрифт, более согласованный между версиями, вы всегда можете взломать кернинг ... http://www.w3schools.com/css/pr_text_letter-spacing.asp