Обнаружение несоответствующего рендеринга в браузере CSS с помощью JavaScript?

Question

У меня есть input[type="text"], к которому применены отступы, и он ведет себя по-разному на ПК Firefox и Mac.

Можно ли отладить это несоответствие с помощью JavaScript?Исходя из приведенного ниже кода, есть ли у кого-нибудь предложения по решению моей проблемы?

Firefox в Windows (проверка firebug)

.searchContainer input {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
  }

Firefox в Mac (проверка firebug)

.searchContainer input  {
   border-color:#7C7C7C #C3C3C3 #DDDDDD;
   border-style:solid;
   border-width:1px;
   color:#555555;
   float:left;
   height:12px;
   padding:3px;
 }

Никакие другие стили не применяются к этим входам.

Есть предложения?

Answer 1

Похоже, что это может быть проблема с размером шрифта в текстовом поле ввода (и, возможно, кнопки тоже).Установка размера шрифта (и даже семейства шрифтов) может решить проблему.

Answer 2

Вы, кажется, не устанавливаете font-size. Когда вы вводите height в поле ввода, вы должны указать его. Вполне возможно, что Mac и ПК имеют разные стандартные размеры шрифта для элементов ввода.

Тем не менее, вероятно, лучше определить высоту ввода, установив padding и font-size, но не height вообще. Таким образом, браузер может справиться с этим проще, если пользователь использует увеличенный шрифт (или функцию «Увеличение текста» в Firefox).

Answer 3

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

Answer 4

Проверьте navigator.platform в Javascript.