diferencia entre Firefox y el relleno de Chrome

hay una diferencia en cómo Firefox y Chrome representan el relleno en css. lo que parece correcto en chrome está acolchado adicional en firefox. hay alguna manera de resolver?diferencia entre Firefox y el relleno de Chrome

.button { 
    font-family: helvetica, arial; 
    font-size: 64px; 
    width: 70px; 
    height: 45px; 
    font-weight: bold; 
    padding: 0px; 
    padding-top: 25px; 
    background-color: #000; 
    color: #fff; 
    text-align: center; 
    float: right; 
    margin: 7px 10px 0 0; 
}

Fuente

2011-03-20 amit

¿Está seguro de que esto no es un problema de "altura de línea"? –

Si tiene una página de demostración, eso ayudaría. –

en esta demostración No veo ninguna diferencia http://jsfiddle.net/W22DC/ – Sotiris

Si su .button es un button esto podría ser una cosa enfoque interno Mozilla ... probar esto?

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

Fuente

2011-03-20 18:51:36 superUntitled

Gracias ... 2 horas perdidas pero podría haber sido mucho más sin esta respuesta ...;) – BizNuge

@amit: Si esta fue la respuesta correcta, debe aceptarla. – tw16

Esto soluciona el problema ... ¿en qué está pensando Mozilla? : | – Steve

Firefox y Chrome render padding exactamente de la misma manera. Tu problema está en otra parte.

¿Está utilizando un restablecimiento de CSS? De lo contrario, la declaración predeterminada line-height podría estar interfiriendo con la reproducción de su botón.

Por un lado, su height es mucho más pequeño que su font-size. Como no tiene overflow especificado, su height siempre se extenderá a al menos font-size (o lo que especifique su line-height).

Si su clase .button es realmente un elemento <button>, también aplique superUntitled fix.

Fuente

2011-03-20 18:56:03

En Firefox, el ancho/alto de un div tiene ancho/alto + relleno. En otros navegadores, el relleno no lo agrega al tamaño del div. – poepje

¿Cuál es el rol de reset.css en el relleno de renderizado? Estoy usando un tema infantil para WordPress y estoy viendo diferentes niveles de relleno para Firefox y Chrome. – Chirag

@poepje: Eso es falso. Firefox usa el modelo de caja W3C. @Chirag: diferentes navegadores tienen diferentes valores para el estilo predeterminado de los elementos. Un 'reset.css' normaliza esos valores para que sus estilos base sean los mismos en todos los navegadores. –

En realidad, es correcto: hay un error en Firefox donde la altura de la línea del elemento del botón no se puede cambiar con la propiedad CSS height-height.

Ver este enlace para obtener más información: http://www.cssnewbie.com/input-button-line-height-bug/

La solución es utilizar el relleno en lugar de línea de altura.

Fuente

2011-04-27 02:08:19

-1

La manera que funcionó para mí fue establecer la altura del objeto para que firefox, cromo y opera lo procesen de la misma manera, y eliminar todo el relleno.

.footertext6{ 
    float: left; 
    padding-top:10px; 
    width: 160px; 
    height:102px; */setting height here*/ 
    background-color:#ffffff; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    font-size: 15px; 
    border-top-right-radius: 50px;  
}

Fuente

2012-12-30 16:30:55

La corrección de foco interno funciona pero también agrego márgenes negativos superior e inferior para que llegue a la altura correcta. e.g .:

*::-moz-focus-inner { 
padding: 0; 
border: 0; 
margin-top:-1px; 
margin-bottom:-1px; 
}

Me encantaba Firefox, pero se ha convertido en un desastre y se ha caído de mi lista de Navidad hace años.

Fuente

2014-03-27 20:08:50

diferencia entre Firefox y el relleno de Chrome

Respuesta

Cuestiones relacionadas