填充iOS按钮

Question

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

标记就像这样，使用字体很棒的图标：

<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作为浏览器的计算机上，我得到了此输出。

http://grahlie.se/other/correct.png

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

http://grahlie.se/other/incorrect.png

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

修改

这是代码的小提琴。

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中创建填充的错误。