如何重置 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:uppercase 就可以了。在 Firebug 中，没有填充、边距、文本缩进或其他“软”或“硬”属性可能会搞砸。我玩弄了显示设置，但它并没有“修复”任何东西或使它变得更糟。

问题

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

Answer 1

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

在css中添加这个也可以解决你的问题。