css - IE9 problema de espaciado de letras
standards render (9)
Esto también me está sucediendo en IE8 por alguna razón. Ni la reducción del tamaño de la fuente ni la configuración del espacio entre letras resolvió el problema.
En otro hilo, vi que esto podría estar relacionado con el tipo de letra. Desafortunadamente, todavía no he encontrado una solución, pero tan pronto como la encuentre, la publicaré aquí. Puede que no lo ayude en este momento, pero puede ayudar a las personas que acceden a esta pregunta más adelante.
Tengo una página que funciona bien, en FF (3x, 4x), Chrome, IE (6, 7, 8).
Cuando se prueba en IE9 los textos son más anchos. Al investigar el problema, parece que el texto en realidad se representa con letras más espaciadas que en otros controladores.
Cuando se cambió el espacio entre letras a -0.6px, los textos se procesaron correctamente, de forma similar a otros navegadores. Además, cuando se cambia el modo de reproducción a "Vista de compatibilidad", la página se ve bien.
¿Sabes qué causó el cambio en el modo de render?
"Resolví" el problema usando el comentario condicional, pero no estoy muy contento por ello
<!--[if IE 9]>
<style>
* {letter-spacing: -0.6px;}
</style>
<![endif]-->
¿Existe algún otro método para resolver el problema?
Editar
Realicé algunas capturas de pantalla en diferentes máquinas y diferentes navegadores y el resultado se puede ver here
Como puede ver, en diferentes máquinas con diferentes navegadores el resultado es el mismo. El único que se procesa de manera diferente es IE9 en modo estándar. la página de origen es
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>
Intenta esto ya que esto funciona con Internet Explorer 8 y Firefox:
letter-spacing:0.49px;
letter-spacing:0.88px !ie;
MSIE colocará el primer espacio entre letras en 0px e ignorará la segunda regla. Firefox leerá la segunda regla y la usará en lugar de la primera regla.
Luego, para compensar, puedes usar el mismo truco y agregar más relleno horizontal a tu texto en MSIE que lo que le das en Firefox.
Por supuesto, hacer más pruebas con otros navegadores!
Intente establecer el valor del letter-spacing firmemente para todo el documento, para que se muestre igual en IE y FF.
Me temo que no tengo IE9 en esta máquina. Intentaré buscar otra vez mañana en una PC que sí lo tenga, pero mi pensamiento inmediato es que el validador w3c dice que su HTML no es válido.
No le gusta el hecho de que su texto está directamente en el CUERPO y no en otro contenedor. Me pregunto si ese era el problema. Quizás los otros navegadores estén "corrigiendo" en su nombre y asumiendo un contenedor de párrafos.
¿Cambia la apariencia si coloca el texto dentro de un párrafo o un DIV?
Otra cosa a considerar ahora que han pasado siete meses desde que hizo esta pregunta es que a partir de junio de 2011, la versión 5 de FireFox comenzó un calendario de lanzamiento rápido. Ahora están en la versión 8 y, como prueba rápida, veo que la versión 7 y 8 de FireFox hacen que el texto sea casi perfecto a nivel de píxeles con IE9. Chrome parece "aplastado" en comparación, ya que el kerning es mucho más estricto y el renderizado de tipo claro en Chrome (para mis ojos) es más severo que el IE9 y el FF7 / 8.
No se le garantizará la representación de fuentes coincidentes entre navegadores, por no hablar de multiplataforma. Todos los navegadores que miré por defecto a (en Windows) Times New Roman, texto de 16 puntos para visualización "normal". Si su aplicación requiere la representación del texto al nivel de coincidencia para todos los usuarios, todos los navegadores, todas las plataformas, entonces procésela como una imagen y guárdela.
Puede hacer referencia al artículo de Microsoft. puede ser el problema porque por la representación de texto
Puede que tenga que ver con redondear arriba / abajo. Usar décimas de px es algo extraño, ya que no se puede obtener menos de un píxel completo en una pantalla a menos que se sepa cómo irá el redondeo. No puedes confiar en IE para hacer nada bien de todos modos.
Siempre he encontrado que la forma más útil de establecer el tamaño de fuente en los navegadores es usar los valores de em no px.
Tiendo a configurar el punto base en la etiqueta del cuerpo en CSS:
font-size: 62.5%
Luego, cada vez que deseo establecer un tamaño de fuente, uso un valor de em tal como:
font-size: 1.1em;
Esto equivale a 11px. La ventaja que he encontrado es que se procesa de manera más consistente en todos los navegadores y también se redimensiona mejor usando los controles de cambio de tamaño del navegador.
Inténtalo, creo que debería resolver tu problema.
Gracias nathj07
humeniuc
¿Está seguro de que está utilizando la fuente de fuente predeterminada o de alguna forma diferente? Esto puede causar la probl