asp.net - moz - Diferencia de altura de línea de 1 píxel entre Firefox y Chrome

appearance none css3

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 de 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ú.

Solo 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.

EDITAR:

aquí está 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 agregan al li y a los elementos a través de jquery ...

Aquí hay 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.

EDITAR:

Después de jugar con esto un poco más, he descubierto que en realidad es el div "encabezado" en sí el que está creciendo en 1px en cromo ... Esto me parece muy extraño.

Answer 1

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

(enlaces html editados)

Answer 2

Aquí está la solución que encontré en esta página :

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

Answer 3

Es importante darse cuenta de que las páginas web siempre se mostrarán de manera 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 4

Este es un problema común que encuentro en algunos de mis sitios ... cuando IE tiene la diferencia de píxeles, normalmente puedo 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 5

He estado luchando con este problema por un tiempo, y casi me rindo por 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 6

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. Al igual que:

@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 7

Ninguna de estas respuestas resuelve el problema.

Conjunto:

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

Debido a que los motores de renderizado de webkit y mozilla implementan la altura de línea de manera diferente, no lo use para manipular la medición de artículos de línea individual.

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 utilice relleno o márgenes para que se comporten de la misma manera.

Aquí hay un JSFiddle que ilustra este problema: http://jsfiddle.net/mahalie/BSMZe/6/

Answer 8

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 es sobre sprites de 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 al de Firefox.

Answer 9

Pude resolver este problema con una fuente web con la que estaba trabajando estableciendo lo siguiente:

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

De acuerdo, es un poco hacky pero hace el trabajo. Sin embargo, significa que tendrá estilos de destino específicamente para Internet Explorer

Answer 10

Supongo que esta es la única forma, use diferentes estilos para diferentes navegadores las secciones problemáticas

/* 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 11

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

Resolví 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 12

Tuve exactamente el mismo problema, resulta que Chrome tenía el zoom configurado en 110% y eso fue romper el menú. Lo noté cuando encendí Chrome en otra computadora y se veía bien.

Answer 13

Tuve un problema similar y fue debido al uso de ccsme 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 14

intente usar display: bloquear con el elemento a "eg ...

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

css:

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

li a{display:block;}

Answer 15

si line-height se usa para alinear verticalmente el texto en un contenedor (lo que no debería), entonces el comportamiento consistente en todos los navegadores se puede aplicar así:

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

Answer 16

también puedes hacer diferentes css para mozila:

-moz-height:2em;

uno también puede usar:

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