Css 如何修复chrome和firefox中输入字段显示的不同字体大小

我在我的web应用程序中注意到，与firefox相比，chrome上相同的输入表单字体大小（当前设置为17px）读起来更小。我附上了一张截图

有没有比简单使用更优雅的方法来解决这个问题

/*chrome*/
input {
 font-size:17px;
}
/*firefox*/
@-moz-document url-prefix() {
   input {
     font-size:15px;/*reduce font size to match what is seen in chrome*/
   }
}

---

我不知道您使用的是什么字体（或平台（Mac和Win也会有不同），但有些浏览器使用CLEARTYPE亚像素渲染来渲染字体，有些浏览器使用石英亚像素渲染（使外观不同），然后其他浏览器使用标准的抗锯齿渲染

解决此问题的一个好方法是在html或正文css中使用字体平滑css：

html {
    font-family: /*yourfont*/;
    -webkit-font-smoothing: antialiased;
}

阅读更多关于它的信息，并查看更多关于它的示例

---

另外请注意，使用em比使用px来测量字体更可取。如果不使用字体平滑，大字体大小尤其会受到像素化的影响，因此为了保持可访问的文本，最好使用ems（这样您仍然可以使用大字体大小）.

在浏览器之间追逐这样的像素是没有意义的。用户选择使用其中一个像素仅仅是因为它们不同，所以我建议不要让它们彼此完全相同。不过，你可以做的是，看看这个。它有一些很棒的东西，可以平衡最重要的事情（这也可以是基于意见的，但仍然不错）您是否为两个浏览器声明并使用相同的字体？如果不是，则浏览器将根据可用性和用户设置选择要使用的字体。