按钮文本推开 Firefox 中的填充答案

【问题标题】：Button text pushes away the padding in Firefox按钮文本推开 Firefox 中的填充
【发布时间】：2012-05-29 03:08:43
【问题描述】：

标记：

<input type="button" value="random text random text random text random text random text"
       style="padding-left:20px; text-align:left; width:100px;" />

这里padding-left 工作正常，直到我设置宽度，在中间切掉文本，这将padding-left 推开。顺便说一句，这只是一个 Firefox 问题。在所有其他浏览器中都能正常工作。实例：http://jsfiddle.net/aB25a/1

有什么想法吗？

【问题讨论】：

谢谢你的提示，我会马上做的。
这里是 jsfiddle 链接：jsfiddle.net/aB25a/1
所以重点是 Firefox 试图将按钮中的文本居中，包括让它溢出到左侧填充中。事实证明，一些网站依赖于这种行为；这就是它被实施的原因。
感谢鲍里斯的信息。你知道有什么方法可以防止这种情况发生吗？
使用<button> 和包含文本的<span> 并在<span> 上设置填充？

标签： css firefox button padding

【解决方案1】：

您应该使用<button> 元素，这使您可以更好地控制其内容发生的情况：

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

然后样式是：

.wrong {
    width: 100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align: left;
    white-space: nowrap;
}

应该适用于所有浏览器的示例：http://jsfiddle.net/p8mg8/1/

【讨论】：

【解决方案2】：

尝试使用margin-left 而不是padding-left，我也建议使用类和CSS 文件。

设置width:auto;，或设置为某个值。

【讨论】：

这是我之前写的一个答案，它应该有助于 Sebs 回答有关边距而不是填充的问题 - stackoverflow.com/a/10701790/1160747
这就是问题所在。 =) 这里是 jsfiddle 链接：jsfiddle.net/aB25a/1
width:auto; 而不是 width:100px :)
但是如果我需要按钮为 100px 怎么办？
它不能有这么多的文本:) 你也可以用另一个带有width:100px; 的 Div 包围它，所以无论如何它都会被切断。

【解决方案3】：

了解如何使其工作：

input[type="button"]::-moz-focus-inner { margin-left:20px };

【讨论】：