css - examples - Cómo restablecer todos los estilos predeterminados del elemento de botón HTML5

css title tooltip

Question

Guión

Utilizo el elemento <button> que aparece como texto sin formato con un "+" en el extremo derecho.
Al hacer clic, un elemento div se expande y revela cierta información. Creo que el elemento del botón es semánticamente correcto para representar un ... botón ... disparador.

Problema

Así que he mezclado algunos botones y elementos h2 y tengo un problema visual. Después de restablecer todos los estilos de agente de usuario predeterminados, espero que cada elemento que presento en el documento se vea sin formato y sin estilo.

Pero el elemento del botón no se ve tan simple. Tiene un texto, ligeramente, sangría de texto.

Ejemplo

Primero, tres elementos son <h2><button>text node</button></h2> y los dos de arriba son solo <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 de otro elemento

Los otros elementos usan background-image, text-transform: mayúsculas y eso es todo. En Firebug no hay almohadillas, márgenes, sangrías de texto u otras propiedades "blandas" o "duras" que podrían estropear las cosas. Jugué con la configuración de pantalla, pero no "soluciona" nada ni empeora las cosas.

Pregunta

¿Alguien puede explicar por qué, incluso después de restablecer los estilos predeterminados, existe esta falla visual en el elemento <button> ?

Answer 1

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

agregue este también en CSS resolverá su problema.