Firefox 中的 Padding Left 怪癖答案

【问题标题】：Padding Left quirk in FirefoxFirefox 中的 Padding Left 怪癖
【发布时间】：2023-03-27 13:41:01
【问题描述】：

input{
    padding:1%;
}
input#checking{
    padding-left:40px;
}

请在 FIREFOX 中检查上述链接并帮助我解决问题。它似乎在 Chrome 中运行良好。即使它具有更高的优先级，padding-left 似乎也不起作用。

【问题讨论】：

【解决方案1】：

如果您不使用 % 长度，它会起作用：

input{
    padding: 5px;
}
input#checking{
    padding-left: 40px
}

我不知道为什么它不适用于%..

【讨论】：

我知道。但任何解决方法。因为我取决于使用 % 很多的流体布局。
也许您可以使用em 大小作为填充等。但这与元素字体大小有关，而不是容器尺寸。或者考虑提交错误报告。
@Shahal Tharique：受到@-Flambino 和@-Eric 的启发，这是一种解决方法：jsfiddle.net/rJhzB。在 IE7-9、Firefox、Chrome、Safari、Opera 中测试。
@thirtydot：但是一旦文本超出文本框宽度，它就不起作用了。
@Shahal：流体布局不需要隐含流体填充。

【解决方案2】：

这看起来类似于问题#1446832，Firefox 似乎不能很好地使用百分比填充。

通用 padding: 1% 与特定的左填充 padding-left: 40px 冲突。在 jsfiddle.net 中，我通过将后者替换为 padding: 0 0 0 40px 来修复它。

【讨论】：

【解决方案3】：

您可以改用text-indent: 40px。这适用于 Firefox

【讨论】：