Html Firefox桌面和Chrome mobile添加神秘的文本输入宽度填充

因此，Firefox桌面和Chrome移动应用程序似乎在呈现网页时添加了额外的文本输入宽度填充（Chrome桌面按预期显示）：

到目前为止，我在StackOverflow上尝试的类似Firefox填充问题的解决方案似乎都无法解决这个问题。下面是Chrome和Firefox对文本输入字段填充的检查（请注意Firefox如何额外添加了18.1667像素）：

铬：

Firefox:

代码如下所示：

：焦点
{
大纲：无；
}
.花式输入框
{
文本对齐：左对齐；
显示：内联块；
利润率：40px 3%1px；
位置：相对位置；
}
.花式输入
{
字体：15px/24px“Lato”，Arial，无衬线；
颜色：#aaa；
框大小：边框框；
字母间距：1px；
边界：0；
填充：7px 7px；
边框：1px实心#ccc；
位置：相对位置；
背景：透明；
}
.fancy_输入~.fancy_标签
{
位置：绝对位置；
左：14px；
宽度：100%；
顶部：10px；
颜色：#aaa；
字母间距：0.5px；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
z指数：-1；
}
.fancy_输入：焦点~.fancy_标签
{
顶部：-18px；
左：1px；
字体大小：12px；
颜色：白色！重要；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
}
.fancy_输入：非（焦点）：有效~.fancy_标签
{
顶部：-18px；
字体大小：12px；
左：1px；
颜色：#aaa；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
}

F00

我不知道你的电脑上的情况是否不同，但在我的电脑上，这是两个因素的组合

首先，显然，带有

size

属性的输入的结果宽度基于原始字体，而不是样式表中给定的字体。解决方案：在样式表中也设置宽度，单位为

ch

units

拉托字体似乎也会引起问题。如果我删除它，只使用Arial，结果在两种浏览器中都是一样的

希望这有帮助

：焦点
{
大纲：无；
}
.花式输入框
{
文本对齐：左对齐；
显示：内联块；
利润率：40px 3%1px；
位置：相对位置；
}
.花式输入
{
字体：15px/24px“Arial”，无衬线；
颜色：#aaa；
框大小：边框框；
字母间距：1px；
边界：0；
填充：7px 7px；
边框：1px实心#ccc；
位置：相对位置；
背景：透明；
宽度：8ch；/*新*/
}
.fancy_输入~.fancy_标签
{
位置：绝对位置；
左：14px；
宽度：100%；
顶部：10px；
颜色：#aaa；
字母间距：0.5px；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
z指数：-1；
}
.fancy_输入：焦点~.fancy_标签
{
顶部：-18px；
左：1px；
字体大小：12px；
颜色：白色！重要；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
}
.fancy_输入：非（焦点）：有效~.fancy_标签
{
顶部：-18px；
字体大小：12px；
左：1px；
颜色：#aaa；
过渡：0.3s；
-webkit转换：0.3s；
-moz跃迁：0.3s；
}

F00

这确实很有帮助！非常感谢。