CSS разница между Firefox / Mac и Firefox / Windows

Question

Я работаю над шаблоном с дизайнером, и мы видим разные вещи.В моем браузере на Mac поле ввода находится рядом с метками, но для дизайнера в его браузере поля ввода находятся под метками.

Я использую сброс cric Эрика Мейера, поэтому все должно быть правильно.Вот скриншот, чтобы проиллюстрировать, что я имею в виду (слева - то, что должно быть, а справа - не должно)

Кто-нибудь знает, как это можно исправить?

Answer 1

Если размеры полей указаны в em с, измените их на px.

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

Оставьте немного места в контейнере (просто сделайте содержащий элемент на несколько пикселей шире, чем должен быть).

Вы также можете попробовать:

input {
 box-sizing: border-box; 
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}   

Что делает размерыэлементов формы немного более последовательны.

Answer 2

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

Поместите font-size и width в поле ввода, это может помочь, поскольку кажется, что значения по умолчанию для font-size различны (или могут быть) в Windows и Mac. Таким образом, вы можете продолжать использовать em s, которые я лично предпочитаю использовать.

Answer 3

Вы можете попробовать что-то вроде $ _SERVER ['HTTP_USER_AGENT'], если вы используете php или проверьте, как получить пользовательский агент на выбранном вами языке программирования на стороне сервера.Основываясь на пользовательском агенте, вы можете вставить условие в раздел заголовка HTML-документа, чтобы напечатать CSS.Убедитесь, что он последний в порядке, так что вы можете переопределить ранее написанное CSS.Это всего лишь один из вариантов.Это полезно, если у вас сложный дизайн.