Comment réinitialiser tous les styles par défaut de l'élément de bouton HTML5

Question

Scénario

Je utilise le <button> élément qui apparaît comme du texte brut avec un "+" à droite.
Au clic, un élément div se développe et révèle des informations. Je pense que l'élément bouton est semanticaley correct pour représenter un tel ... bouton ... déclencheur.

Problème

J'ai donc mélangé quelques boutons et éléments h2 et j'ai un problème visuel. Après avoir réinitialisé tous les style d'agent utilisateur par défaut Je m'attends à ce que chaque élément que j'introduis dans le document soit clair et dépourvu de style.

Mais l'élément bouton ne semble pas si simple. Il a un texte légèrement en retrait.

Exemple

Tout d'abord, trois éléments sont <h2><button>text node</button></h2> et les deux ci-dessus sont juste <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 d'un autre élément

Les autres éléments utilisent background-image, text-transform: majuscule et c'est tout. Dans Firebug, il y a non rembourrages, marges, retraits de texte ou autres propriétés "douces" ou "dures" qui pourraient gâcher les choses. J'ai joué avec les paramètres d'affichage, mais cela ne "corrige" rien et ne fait qu'empirer les choses.

Question

Quelqu'un peut-il expliquer pourquoi, même après la réinitialisation des styles par défaut, il y a cet échec visuel sur le <button> élément?

Answer 1

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

ajoutez celui-ci également dans css, cela résoudra votre problème.