通过JavaScript检测CSS浏览器不一致的呈现？

Question

我有一个input[type="text"]应用了填充，它在firefox PC中的行为与然后在Mac上的行为不同。

我可以使用JavaScript调试这种不一致吗？ 根据下面的代码，有没有人有任何消息来解决我的问题？

Windows上的Firefox（萤火虫检查）

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

Mac上的Firefox（萤火虫检查）

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

没有其他样式应用于这些输入。

有什么建议吗？

Answer 1

您似乎没有设置font-size。在输入字段上强制height时，应指定一个。完全可以想象，Mac和PC具有不同的输入元素标准字体大小。

也就是说，最好通过设置padding和font-size但不设置height来定义输入的高度。这样，如果用户使用放大的字体（或Firefox中的“文本缩放”功能），浏览器可以更轻松地处理它。

Answer 2

由于您以像素为单位指定输入的高度，因此您可能还需要指定字体大小（以像素为单位）。看起来平台特定的字体渲染可能是这里的罪魁祸首。

Answer 3

看起来它可能是输入文本框中字体大小的问题（也可能是按钮）。设置字体大小（甚至字体系列）可以解决问题。

Answer 4

在Javascript中检查navigator.platform。