Web-Kit y valores de subpíxeles, ¿solución?
Me di cuenta de que los navegadores web-kit como Chrome y Safari (Windows) tienden a redondear los valores em al píxel más cercano, mientras que Firefox, IE,? Opera? puede usar valores subpíxel. Esto normalmente no es un gran problema, pero cuando los uso para alinear con precisión el espaciado entre letras o uso sombras de texto para lograr un efecto consistente en diferentes resoluciones de clientes, esto me causa dolor de cabeza. Eche un vistazo en el siguiente caso de prueba.
erá que en FF, incluso las letras más pequeñas aún tienen una sombra, mientras que Chrome redondea el valor em a cero y los dos primeros párrafos no tienen sombra.
EDITA Esto no se trata de las unidades. Si reemplaza 0.03em con 0.9, 0.8, 0.7 .. px FF mostrará sombras cada vez más pequeñas, mientras que cuando Chrome desciende por debajo de 1 px, de repente no muestra nada.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>
<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>
</body>
</html>