如何重置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中添加这个也可以解决你的问题。