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

脚本

我使用< button>这个元素就像纯文本一样,右边是一个“”.
点击一个div元素展开并显示一些信息.我认为按钮元素是语义的正确代表这样一个…按钮…触发器.

问题

所以我混合了一些按钮和h2元素,我有一个视觉问题.在重置所有默认用户代理样式之后,我期望我向文档介绍的每个元素看起来都是平滑的和未分支的.

但是按钮元素看起来并不平坦.它有一个文本,略微,文本缩进.

例

首先,三个元素是< h2< button>文本节点< / button>< / h2>而上述两个只是< h2>文本节点< / 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>元件？

解决方法

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

添加这个也在css它会解决你的问题.

原文地址：https://www.jb51.cc/css/214130.html