css - 按钮文本推开 Firefox 中的填充

Question

标记：

<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

有任何想法吗？

Answer 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/

Answer 2

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

设置width:auto;, 或某个值。

Answer 3

了解如何使其工作：

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