Button text pushes away the padding in Firefox

Markup:

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

Here padding-left works fine until I set the width, chopping the text off in the middle, which pushes padding-left away. This is a Firefox problem only btw. Works fine in all other browsers. Live example: http://jsfiddle.net/aB25a/1

Any ideas?

---

You should use the <button> element, this gives you more control over what happens with its contents:

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

And the styles then are:

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

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

Example that should work in all browsers: http://jsfiddle.net/p8mg8/1/

---

try using margin-left instead of your padding-left , also I recommend to use classes and CSS files.

Set width:auto; , or at some value.

---

了解如何使其工作：

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

链接地址: http://www.djcxy.com/p/29428.html

上一篇: CSS水平滚动条不显示，或右侧有空白区域

下一篇: 按钮文字将Firefox中的填充删除