Feb 10

ie6Maquetar 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=’./styles/img/nuevo.png’);

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; }

¡Y listo!

3 Comentarios en “Algunos Bugfix y Hacks para maquetar”

  1. Jonee dice:

    tu hack para chrome ya no es efectivo, es el mismo que veo en todos lados para versiones viejas de chrome y Safari, solo veo lo mismo, es como un Copy/paste.

  2. Kaos dice:

    Si encuentras uno nuevo estaremos encantados de publicarlo y compartirlo :P

  3. matias dice:

    button {
    padding: 0 0 1px(uno mas) 0;
    }

    con eso suben el boton caido ;)

Comentar