Maquetar hoy en día es una tarea de locos, cada explorador tiene un motor de render y suelen ofrecer resultados diferentes a la vista en muchos elementos.

A continuación os dejo 3 consejos que pueden resolver ciertos fallos.

.

.

1. Transparencias en PNG para Explorer 6

Si queréis que los PNG en explorer 6 guarden las transparencias, la mejor forma es usar el siguiente CSS:

background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’/imagen.png’);

Podéis usar el sizingMethor scale en caso de que la capa tenga exactamente el mismo tamaño que el PNG. En caso contrario podéis usar fixed. De esta manera no hacen falta módulos de JS. El único inconveniente que sólo funciona en caso de que la imagen sea un background.

2. Para cargar un CSS sólo en Explorer 6

En muchas ocasiones tenemos que tocar ciertos parámetros sólo en Explorer 6. Lo mejor es cargar un CSS independiente con todos los arreglos. Este código cargará un CSS que sólo afectará a Explorer 6.

<!–[if  lte IE 6]>
<link rel=»stylesheet» href=»/style/ie6.css» type=»text/css» />
<![endif]–>

3. Hack para botones en Safari, Chrome y Firefox

Para eliminar los márgenes y padding erróneos en Safari, Chrome y Firefox que aplican sobre los botones (etiqueta button y span) añadir a vuestro CSS las siguientes lineas:

@media screen and (-webkit-min-device-pixel-ratio:0) {
button span { margin-top: -1px; }
}

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