23

设想

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

问题

所以我混合了一些按钮和 h2 元素，我遇到了视觉问题。在重置所有默认用户代理样式后，我希望我引入到文档中的每个元素看起来都很简单且没有样式。

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

例子

首先，三个元素是 <h2><button>TEXT</button></h2> 而上面的两个只是 <h2>TEXT</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

其他元素使用背景图像，文本转换：大写，就是这样。在 Firebug 中，没有填充、边距、文本缩进或其他“软”或“硬”属性会搞砸。我玩弄了显示设置，但它并没有“修复”任何东西或让它变得更糟。

问题

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

4

1 回答 1

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

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

于 2013-04-18T08:12:08.847 回答