html - 在 iOS 中填充按钮

Question

在 <button> 上有额外填充的问题iOS Safari 浏览器中的元素。

标记是这样的，使用超赞的字体图标:

<button type="submit" class="btn-class">
   <i class="fa fa-plus"></i>
</button>

这是按钮元素中类的 CSS:

background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;

在使用 Chrome 作为浏览器的计算机上，我得到了这个输出。

但是当使用 iPhone iOS 8.1.2 和 Safari 时，加号左侧有一个奇怪的填充:

关于问题是什么的任何想法？

编辑

这是代码中的 fiddle 。

http://jsfiddle.net/qpvat7xv/

Answer 1

只需添加 padding: 0给你的<button>风格:

button {
    -webkit-appearance: button;
    cursor: pointer;
    font: inherit;
    overflow: visible;
    text-transform: none;
    padding:0;
}

这将解决 Button 的错误在 iOS 中创建填充的标签。