6.789 lecturas 3 comentarios

Algunos Bugfix y Hacks para maquetar

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!

Comentarios

  • 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.