¿Es posible lograr consistencia de altura de línea en todos los navegadores?

¿Es posible lograr consistencia de altura de línea en todos los navegadores?¿Es posible lograr consistencia de altura de línea en todos los navegadores?

Adjunto una imagen. Verá una caja rectangular roja y una caja rectangular verde (ambas del mismo ancho y alto) que he agregado manualmente a través de Photoshop para ayudar a mostrar la diferencia de espacio/espacio entre las líneas punteadas (debajo del cuadro rojo) y la "Seguidores: 3197179" texto.

Parece que Firefox es el único que muestra los elementos de manera diferente. Noté esto cuando aplico una altura de línea. ¿De alguna manera puedo hacer esto coherente con todos los navegadores?

Estoy usando Firefox 3.6.13, Safari 5.0.3, Opera 10.63 y Chrome 8.0.552.231.

CSS:

.clearfix, .container {display:block;} 

ul   { margin:0; padding:0; list-style:none; } 
li   { position:relative; margin:0 0 0 0; padding:12px 0; border-bottom:1px dotted #E7E7E7; } 

li img  { float:left; margin-top:0; } 

li p  { margin:0 0 0 58px; padding:0; font-weight:normal; border:none; font-size:1em; line-height:1.3em; } 
li p.name  { position:relative; padding-top:0; font-size:1.1em; font-weight:bold; }

HTML

<ul> 
    <li class="clearfix"> 
      <a href="#"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a> 
      <p class="name"> 
       <a href="#">Jessica Simpson</a> 
      </p> 
      <p>Blurred out text here</p> 
      <p>Followers: 3197179</p> 
    </li> 
</ul>

alt text

Fuente

2010-12-17 Christian Fazzini

sé la diferencia es sólo por uno o dos píxeles. Pero este es un requisito del cliente y un "Debe". ¿Es posible hacer eso o debo explicarle al cliente que es imposible lograr una diferencia de 1 a 2 píxeles de un navegador a otro? –

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – Flack

Hola, Flack, hay ciertas cosas que puedo lograr, con poco esfuerzo y sin "hacks de CSS" para que la visualización se vea igual para todos los navegadores.Sin embargo, me pregunto si el caso en mi publicación inicial cae dentro de la categoría "imposible" –

Sus em's actualmente en uso. Tal vez puedas tratar de ser más específico tratando de usar px tanto en altura de línea como en tamaño de fuente. También trato de usar relleno en esos textos, tal vez funcione, creo;).

En cualquier navegador cruzado que haga. No hay una forma concreta de hacer las cosas para que sea igual en cada renderizador. Siempre es un sueño que la mayoría de los clientes no entienden. Para mí, es mejor siempre explicarles lo que quieren y cuánto tiempo pasamos en cosas como diferencias de 1px/2px. Es normal normal. Puede marcar this video by Andy Clarke speaking about cross browser and some other cool stuff.

Fuente

2010-12-18 02:14:23

Hola Ragingmon, intenté usar píxeles en su lugar. El resultado fue mucho peor. Lo que significa más espacio/espacio. Interesante video :-) Gracias por señalar esto –

No hay problema, amigo. ¿Alguna solución hasta ahora? : D –

Básicamente lo acabo de explicar. La perfección en todos los navegadores web es imposible :-) –

¿Está utilizando un restablecimiento CSS? Estos ayudan a aliviar la mayoría de los problemas entre navegadores. Meyer Web tiene uno popular: http://meyerweb.com/eric/tools/css/reset/

Fuente

2010-12-17 20:51:40

por ejemplo, http://meyerweb.com/eric/tools/css/reset/ – BryanH

Hola Babak, sí, actualmente estoy usando Blueprint, que incluye reset.css, y ya he cargado –

¿Ha especificado usted alguna norma común? e.g:

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-size: 100%; 
    line-height: 1; 
}

A veces es útil, incluso sin un enfoque completo de reset.css.

Fuente

2010-12-17 20:53:30 Flack

Sí, tengo estos establecidos también. Sigo viendo diferencia de brecha de 1-2 píxeles como en la captura de pantalla que se muestra en la publicación inicial –

Encontré esto útil en otro entorno. ¡Gracias por compartirlo! – kevincoleman

Puede añadir line-height por sólo Mozilla, mediante el uso de:

@-moz-document url-prefix() { 
    *, body { 
     line-height: [as per your requirement]; 
    } 
}

Fuente

2017-11-22 14:24:26

Este método ya no es compatible con Mozilla. https://developer.mozilla.org/en-US/docs/Web/CSS/@document – jtheletter

Podría ser cómo se está representando la fuente. Intenta usar esto como una familia de fuentes.

font-family:"Arial Unicode MS","Lucida Sans Unicode";

Fuente

2018-03-05 19:58:26

¿Es posible lograr consistencia de altura de línea en todos los navegadores?

Respuesta

Cuestiones relacionadas