El texto del botón empuja el relleno en Firefox

Margen:

<input type="button" value="random text random text random text random text random text"
       style="padding-left:20px; text-align:left; width:100px;" />

Aquí padding-left funciona bien hasta que configuro el ancho, cortando el texto en el medio, lo que empuja padding-left fuera. Este es un problema de Firefox solo por cierto. Funciona bien en todos los demás navegadores. Ejemplo en vivo: http://jsfiddle.net/aB25a/1

¿Alguna idea?

preguntado el 22 de mayo de 12 a las 16:05

Gracias por el consejo, lo haré de inmediato. -

Aquí está el enlace jsfiddle: jsfiddle.net/aB25a/1 -

Entonces, el punto es que Firefox intenta centrar el texto en el botón, incluso permitiendo que se desborde en el relleno izquierdo. Resulta que algunos sitios se basan en este comportamiento; por eso se implementó. -

Gracias por la información Boris. ¿Conoces alguna forma de evitar que esto suceda? -

Utilizar <button> con un <span> dentro que contiene el texto y establecer el relleno en el <span>? -

3 Respuestas

Se debe utilizar la <button> elemento, esto le da más control sobre lo que sucede con su contenido:

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

Y los estilos entonces son:

.wrong {
    width: 100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align: left;
    white-space: nowrap;
}

Ejemplo que debería funcionar en todos los navegadores: http://jsfiddle.net/p8mg8/1/

contestado el 23 de mayo de 12 a las 14:05

intenta usar margin-left en lugar de tu padding-left, también recomiendo usar clases y archivos CSS.

Kit width:auto;, o en algún valor.

contestado el 22 de mayo de 12 a las 16:05

Aquí hay una respuesta que escribí anteriormente que debería ayudar a Sebs a responder con respecto al margen sobre el relleno: stackoverflow.com/a/10701790/1160747 - rick donohoe

Ahí es donde sale mal. =) Aquí está el enlace jsfiddle: jsfiddle.net/aB25a/1 - silla hinchada

width:auto; en lugar de width:100px :) - seb

pero ¿y si necesito que el botón sea de 100 px? - silla hinchada

de lo que no puede tener tanto texto :) También puede rodearlo con otro Div con width:100px; por lo que se cortará de todos modos. - seb

Descubrí cómo hacerlo funcionar:

input[type="button"]::-moz-focus-inner { margin-left:20px };

contestado el 23 de mayo de 12 a las 08:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.