javascript - 通过JavaScript检测CSS浏览器渲染不一致？

Question

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

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

Windows 上的 Firefox( Firebug 检查)

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

Firefox on 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

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

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