css разница между firefox/Mac & firefox/Windows

Question

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

Я использую сброс css eric meyer, поэтому все должно быть правильно. Вот скриншот, чтобы проиллюстрировать, что я имею в виду (слева это то, что должно быть и справа, что это не должно быть)

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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