Bueno, creo que lo acabo de solucionar. Resulta que según la
especificación un width no puede ser aplicado a un elemento inline. Pero claro, IE hace lo que quiere y sí deja aplicar un ancho.
Lo leí
aqui, que lo he encontrado de chiripa.
La solución pasa por declarar el elemento como
inline-block en la
propiedad display (algo que yo desconocía).
Bueno, dejo el código que a más de uno le servirá. Contiene un hack para IE6, aunque soy consciente de que no se deben utilizar y que estaría mejor en un archivo CSS aparte para incluirlo solamente en IE6. Nótese que no se puede dejar ningún espacio entre etiqueta DIV y etiqueta DIV o no se acoplarán correctamente, de ahí el código siguiente:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
.pto {
display: -moz-inline-box; /* mozilla firefox */
display: inline-block; /* resto de navegadores */
_display: inline; /* hack para IE6 */
height: 1px;
width: 1px;
line-height:1px;
font-size: 1px;
}
</style>
</head>
<body>
<div class="pto" style="background-color: red;"> </div
><div class="pto" style="background-color: blue;"> </div
><div class="pto" style="background-color: olive;"> </div>
</body>
</html>
Espero que os sirva.
Saludos!