如何重置HTML5按钮元素的所有默认样式

Question

脚本

我使用的<button>元素与纯文本一样,右端带有"+".
单击时,div元素将展开并显示一些信息.我认为按钮元素在语义上是正确的,以表示这样的...按钮...触发器.

问题

所以我混合了一些按钮和h2元素,我有一个视觉问题.重置所有默认用户代理样式后,我希望我引入文档的每个元素都看起来简单明了.

但是按钮元素看起来并不那么简单.它有一个文本,略有文本缩进.

例

首先,三个要素是<h2><button>text node</button></h2>,而上面的两个是正义的<h2>text node</h2>

CSS

* {
        /*Reset's every elements apperance*/
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        border-spacing: 0;
        color: #26589F;
        font-family: 'PT Sans Narrow',sans-serif;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.42rem;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        text-align: left;
        text-decoration: none;
        text-indent: 0;
}

其他元素的CSS

其他元素使用background-image,text-transform:大写,就是这样.在Firebug中,没有填充,边距,文本缩进或其他"软"或"硬"属性可能会搞砸.我玩了显示设置,但它没有"修复"任何东西或使其变得更糟.

题

任何人都可以解释为什么,即使重置默认样式后,<button>元素上也会出现这种视觉故障？

Answer 1

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

在css中添加这个也将解决您的问题.