iPhone <按钮>填充不可更改？</button>

Question

移动版Safari中的HTML5 <button>似乎具有固定的，不可更改的左右填充。 Here's a demo以及它在Safari 5和iOS4中的外观。

如何摆脱填充？

Answer 1

我只是想通了“额外的填充”总是1em。如果您使用字体大小的绝对数字，您可以将按钮的font-size设置为0并将其重置为内部元素：

button{
   font-size:0;
}
button span{
   font-size:14px;
}

<button><span>Submit</span></button>

Answer 2

只要您不需要本机控制按钮外观，并且可以在CSS中自行创建样式，只需添加-webkit-appearance: none，您就可以完全控制该元素。

您也可以尝试-webkit-appearance: button或-webkit-appearance: pushbutton尝试获取默认样式。

您可以看到其中一些at work here。

Answer 3

我通过将<button>内容包装在<div>中来解决此问题...

<button><div>Submit</div></button>

使用jQuery并将以下内容添加到脚本中

或 ...

$('button').wrapInner('<div/>')

...并在页面中包含以下样式

button { padding: 0; }
button > div { margin: 0 -1em; padding: 0.4em 0.8em; }

请注意，您可以更改内部div的填充以满足您的需要。另请注意，这仅适用于<button>元素，而不适用于<input type="button">或相关元素，因为它们不能包含子元素。

Answer 4

在搞了一个星期的按钮后，我把它们抛弃了，现在我用div-s代替了。如果您将display: inline-block;添加到div按钮，它也可以像按钮一样居中。

Answer 5

我发现的“最干净”的解决方案不需要额外的元素，但假设您有一些固定的尺寸。点头表示负面利润的想法。这是类似的。这将抵消额外的填充：

text-indent:-6px;

Answer 6

这是所有webkit浏览器的错误特征。 尝试添加

box-sizing: conter-box;