Diferencia de altura de línea de 1 píxel entre Firefox y Chrome

Question

Trabajando en un nuevo diseño de sitio en asp.net con páginas maestras. El encabezado de la página es una "barra de menú" de 35px de alto que contiene un control de menú asp renderizado como una lista desordenada.

El elemento del menú seleccionado tiene un estilo con un fondo de color diferente y un borde de 2 píxeles alrededor de los lados superior izquierdo y derecho. La parte inferior del elemento de menú seleccionado debe alinearse con la parte inferior de la barra de menú para que la "pestaña" seleccionada parezca fluir al contenido que se encuentra debajo. Se ve bien en Firefox y IE, pero en Chrome la "pestaña" parece ser 1 píxel más alta que la parte inferior de la barra de menú.

Me pregunto si hay algún tipo de error que desconozco.

Me doy cuenta de que lo más probable es que necesite un código para ayudar con este problema, así que no publique el CSS lo antes posible.

EDIT:

aquí es el css para el menú ...

div.hideSkiplink 
{  
    width:40%; 
    float:right; 
    height:35px; 
} 

div.menu 
{ 
    padding: 0px 0px 0px 0px; 
    display:inline; 
} 

div.menu ul 
{ 
    list-style: none; 
} 

div.menu ul li 
{ 
    margin:0px 4px 0px 0px; 
} 

div.menu ul li a, div.menu ul li a:visited 
{ 
    color: #ffffff; 
    display: block; 
    margin-top:0px; 
    line-height: 17px; 
    padding: 1px 20px; 
    text-decoration: none; 
    white-space: nowrap; 
} 

div.menu ul li a:hover 
{ 
    color: #ffffff; 
    text-decoration: none; 
    border-top: 1px solid #fff; 
    border-right: 1px solid #fff; 
    border-bottom: none; 
    border-left: 1px solid #fff; 
} 




div.menu ul li a:active 
{ 
background:#ffffff !important; 
border-top:2px solid #a10000; 
border-right:2px solid #a10000; 
border-bottom: none; 
border-left:2px solid #a10000; 
color: #000000 !important; 
font-weight:bold; 

} 


div.menu ul a.selected 
{ 
    color: #000000 !important; 
    font-weight:bold; 
} 

div.menu ul li.selected 
{ 
background:#ffffff !important; 
border-top:2px solid #a10000; 
border-right:2px solid #a10000; 
border-bottom: none; 
border-left:2px solid #a10000; 
} 

div.menu ul li.selected a:hover 
{ 
    border: none; 
} 

Las clases seleccionadas se añaden a la li y una serie de elementos a través de jQuery ...

Aquí es una captura de pantalla del problema ... El ejemplo de Chrome está en la parte superior y puedes ver 1px de borde rojo debajo de la pestaña. En la parte inferior está la imagen de Firefox donde todo se ve bien.

EDIT:

Después de jugar con esto un poco más, he descubierto que en realidad es la "cabecera" div sí que está creciendo por 1 píxel en cromo ... esto parece muy extraño para mi

Answer 1

Es importante darse cuenta de que las páginas web siempre se mostrarán de forma diferente en diferentes navegadores. Adquirir la perfección de píxeles es inútil, y hoy trato de explicar a mis clientes qué tipo de costo implica hacer que cada navegador represente exactamente el sitio. Más a menudo ahora, entienden que IE6 y FF4 no mostrarán ninguna página de la misma manera. Debemos intentar que nuestros clientes comprendan y acepten la dinámica de la web.

Mejora progresiva y degradación elegante. Paz.

Answer 2

Este es un problema común que encuentro en algunos de mis sitios ... cuando IE tiene la diferencia de píxeles, generalmente puedo simplemente agregar un píxel de margen/relleno en mi hoja de estilos de IE. Pero cuando se trata de Safari/Firefox/Chrome, suelo vivir con el píxel y hacer feliz a la multitud de Firefox (por ahora, ¡hasta que Webkit gobierne la web!), Aunque parezca un poco extraño en el navegador opuesto.

Sin embargo, es posible que también desee verificar los valores de altura de línea (o agregar un valor, si no hay uno) en el elemento ul o div. Jugar con eso me permitió obtener el relleno exactamente igual en FireFox, Chrome e IE.

Answer 3

Acabo de tener este mismo problema, y ​​lo resolví estableciendo explícitamente la altura de línea y el tamaño de fuente en el elemento <li> que contiene los elementos <a> que son los enlaces de pestaña. Espero que esto ayude a alguien en el futuro.

(enlaces html) editado

Answer 4

he estado luchando con este problema por un tiempo ahora, y casi se rindieron en el píxel. Sin embargo, me ha llegado uno de esos momentos eurika: si alineas la pestaña perfectamente en Chrome (lo que deja una superposición en Firefox), establece la altura del ul a la altura del li (incluido el relleno), puedes eliminar los píxeles ofensivos en Firefox al configurar el desbordamiento a oculto en el ul.

Espero que esto ayude a alguien por ahí!

Answer 5

Podría ser un principiante en CSS, pero encontré el mismo problema en W3Cschools.com, en uno de sus ejemplos.

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

este ejemplo se trata de sprites imagen. Puede ver en este ejemplo, en Chrome, el icono de inicio y el ícono anterior tienen la línea divisora ​​de 1px, que no es el caso en Firefox.

Parece que en Chrome el número de píxeles es 1pixel diferente de la de Firefox.

Answer 6

Ninguna de estas respuestas resuelve el problema.

Set:

line-height: 1; 
padding-top: 2px; 

Debido webkit & Mozilla motores de renderizado implementan de forma diferente altura de la línea no utilice esto para manipular la medición de elementos de línea individuales.

Para elementos como menús, botones y especialmente pequeñas burbujas de notificación, restablezca la altura de la línea a la normalidad y use relleno o márgenes para que se comporten de la misma manera.

He aquí una jsFiddle ilustrar esta cuestión: http://jsfiddle.net/mahalie/BSMZe/6/

Answer 7

que tenían el mismo problema exacto, resulta cromo había zoom ajustado al 110% y que estaba rompiendo el menú. Lo noté cuando encendí Chrome en otra computadora y se veía bien.

Answer 8

Me he encontrado con este problema en relación con el texto con fondos transparentes.

No pude conseguir que ninguna de las soluciones anteriores funcionara de manera consistente, así que terminé usando un hack de webkit para darles a esos navegadores una altura de línea diferente. De esta manera:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .your-class { 
     line-height:20px; 
    } 
} 

Eww, hacky! Intento evitar los hacks de CSS, pero no pude encontrar otra manera. Espero que ayude a alguien.

Answer 9

Tuve el mismo problema con mis pestañas principales que las mostraban en Chrome, tenían un píxel de altura y tenían una hendidura fea entre las pestañas y el fondo blanco del mainframe.

He resuelto el problema dando a la pestaña div un margen superior con un valor flotante. Primero intenté margen superior: 0.1px nada luego 0.2, etc. hasta que con un margen superior de 0.5 todo se muestra bien sobre todos los principales navegadores.

Answer 10

me las arreglé para resolver este problema con una fuente web que estaba trabajando con definiendo la siguiente:

.some-class { 
    display: inline-table; 
    vertical-align: middle; 
} 

Pero reconozco que es un poco hacky, pero hace el trabajo. Aunque significa que tendrá estilos de destino específicamente para Internet Explorer

Answer 11

Tuve un problema similar y fue debido al uso de ems para tamaños de fuente, márgenes y relleno. Los navegadores estaban redondeando el ems de manera diferente y causando problemas intermitentes de 1px por todo el sitio dependiendo de la duración del contenido. Una vez que cambié todo a las mediciones de píxeles, mis problemas desaparecieron.

Espero que esto ayude!

Answer 12

intentar usar display: block con el elemento" por ejemplo ...

<li><a href="">Link</a></li> 

css:

li{line-height:20px;}/*example only*/ 

li a{display:block;} 

Answer 13

Aquí está la solución que encontré en this page:

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

Answer 14

Supongo que esta es la única manera, use diferentes estilos para diferentes navegadores la problemática secciones

/* FOR MOZILLA */ 
@-moz-document url-prefix() { 
.selector { 
color:lime; 
} 
} 
/* FOR CHROME */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */ 
.container { 
margin-top:100px; 
} 
/* Safari 5+ ONLY */ 
::i-block-chrome, .container { 
margin-top:0px; 
}`` 

Answer 15

si line-height se utiliza para alinear verticalmente el texto en un recipiente (que no debería), entonces el comportamiento consistente a través de los navegadores se puede hacer cumplir de esta manera:

line-height: 75px 
height: 75px 
overflow: hidden 

Answer 16

también se puede hacer diferente CSS para Mozila:

-moz-height:2em; 

también se puede utilizar:

@-moz-document url-prefix{ 
    // your css 
}