CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari…
Todos sabemos lo divertido y emocionante que es hacer la compatibilidad crossbrowser de nuestras páginas web.
Por suerte para nosotros, existen un gran número de hacks CSS que podemos utilizar en cada una de las versiones de cada navegador para ayudarnos a poder mostrar por igual los contenidos de una web en todos los navegadores.
Partiré de este estilo:
.selector {
color: #CCCCCC;
}
Empezaré por Internet Explorer, dado que es para el que usualmente se necesitan más hacks:
Internet Explorer 6
.selector {
_color: #CCCCCC;
}
Recordad que IE6 no interpreta la propiedad (o palabra clave..) de CSS “!important” por lo que podéis jugar con ello (aunque no es lo más recomendable):
Internet Explorer 6 (!important)
.selector {
color: #CCCCCC !important;
color: #000000; /* Éste estilo sólo se aplicará a Internet Explorer 6 */
}
Internet Explorer 7 y anteriores:
.selector {
*color: #CCCCCC;
}
Internet Explorer 8
Este es un poco putilla, ya que el mismo hack de IE8 a veces lo interpreta IE7… así que, si nos interesa, primero habrá que poner algo que interprete únicamente IE7 y después hay que poner el hack de IE8:
/* Interpretado únicamente por IE7 (actúa como un !important) */
*:first-child+html .selector {
color: #CCCCCC;
}
.selector {
color /*\**/: #CCCCCC\9 /* Sin punto y coma!! */
}
Todas las versiones de Internet Explorer
.selector {
color: #CCCCCC\9 /* Sin punto y coma!! */
}
Internet Explorer 7 y demás navegadores modernos (incluido IE8)
html>body .selector {
color: #CCCCCC;
}
Todos los navegadores modernos (incluido IE8)
html>/**/body .selector {
color: #CCCCCC;
}
Opera 9.27 y anteriores
html:first-child .selector {
color: #CCCCCC;
}
Safari
html[xmlns*=""] body:last-child .selector {
color: #CCCCCC;
}
Safari 3+, Opera 9+, Firefox 3.5+ y Chrome 1+
body:nth-of-type(1) .selector {
color: #CCCCCC;
}
/* Otra opción... */
body:first-of-type .selector {
color: #CCCCCC;
}
/* Y otra más... */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
Safari 3+ y Chrome 1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector {
color: #CCCCCC;
}
}
/* Otra opción... */
body:nth-of-type(1) .selector{
color: #CCCCCC;
}
Todas las versiones de Firefox
@-moz-document url-prefix() {
.selector {
color: #CCCCCC;
}
}
Cualquier Gecko (incluido Firefox)
*>.selector {
color: #CCCCCC;
}
Firefox 1.5+
.selector, x:-moz-any-link, x:only-child {
color: #CCCCCC;
}
Firefox 2 y versiones anteriores
body:empty .selector {
color: #CCCCCC;
}
/* Otra opción... */
html>/**/body .selector, x:-moz-any-link {
color: #CCCCCC;
}
Firefox 3 (y quizás más nuevos)
html>/**/body .selector, x:-moz-any-link, x:default {
color: #CCCCCC;
}
No he probado todos ellos así que si veis alguno que no funciona, por favor, hacédmelo saber para que pueda buscar alguna alternativa (o eliminarlo…).
Además os invito a que añadáis cualquier hack de CSS que no haya puesto comentando esta entrada 
Páginas de referencia:
Hola.
Primero de todo: !important no es un hack, es una palabra clave en una regla normal CSS. Es decir, es CSS estándar y no provoca errores en un navegador que soporte CSS, que es precisamente lo que hacen los hacks, de ahí el no recomendar su uso.
Otra cosa es que algún navegador no soporte ciertas reglas CSS, …pero eso no es un hack. No es una discusión semántica si no de concepto y de conocimiento de CSS.
Segundo: ¿Hacks?, aplicar hacks, salvo casos excepcionales, simplemente significa desconocer la especificación CSS y el comportamiento de los navegadores. En prácticamente todos los casos no es necesario un hack, sobra con cosas como aplicar herencias o especifidad dependiendo del navegador o del resultado deseado; …y si lo necesitas es que tu CSS tiene errores o algo anda mal, en cualquier caso no está bien diseñado.
Todo esto asumiendo siempre que es prácticamente imposible que un diseño se vea igual en todos los navegadores… por muchos hacks que se usen eso no va a pasar. Así que lo correcto y lo lógico es asumir pequeñas diferencias en el diseño, por el contrario, no es lógico aplicar un hack para una pequeña diferencia que nunca vas a poder homogeneizar al 100%.
Un saludo.
Tienes toda la razón con lo de important.. metí la pata diciendo que era un hack y ya lo he corregido.
En cuanto a todo lo demás… dices que aplicar hacks significa desconocer las especificaciones CSS y el comportamiento de éste en los navegadores… no te quito razón. Pero sabes tan bien como yo que hay navegadores que tienen bugs y que no hay más manera que añadir arreglos CSS para solucionarlo. Para ello, la mejor opción, sin lugar a dudas, es crear CSS con los cambios para cada navegador.
Pero si únicamente necesitaras arreglar un único detalle (o dos) de tu web, ¿seguro que crearías un CSS alternativo? ¿o utilizarías un hack?
Yo no soy nada partidario de utilizar hacks y, como tú (y al igual que en mi trabajo) opino que si algo te está fallando, es porque no sabes hacerlo. Pero esto no quita que de vez en cuando utilice alguno sea por lo que sea.
Por eso puse todos juntos, para tener rápido acceso a todos ellos sin tener que andar buscando por internet.
Si no andabas buscando hacks, no sé cómo has acabado aquí. Da la sensación que busques en google “CSS Hacks” para burchar las páginas donde los comenten (de ser así ya podías haber comentado en las páginas de referencia ;p).
Saludos.
bueno antes que nada, aclarar a k en la comunidad de CSS se refiere a hack a cualquier combinacion de instrucciones que permiten modificar un comportamiento por defecto extraño en el navegador.
Por esa razon, los llamados “conditional comments” (<!–[if IE]>….) se dicen que son un hack, ya que permiten modificar el comportamiento estandard del navegador (en este caso IE) mediante una instrucciones especiales.
A partir de aquí, el caso que comenta boletarire de !important, si que se considera un hack. Pues el comportamiento de FF i IE en el caso de !important sobre el mismo selector es distinto y se puede utilizar para modificar solamente el comportamiento de un atributo en particular. En ese caso, el color, que no es un buen ejemplo, pero si lo seria un margin, un width….
En cuanto a lo Segundo…. precisamente, el conocer el distinto comportamiento de los navegadores y el no cumplimiento de las especificaciones de CSS es el origen de estos hacks, para solucionar estas malas interpretaciones de los distintos navegadores.
Asi que ya sabeis, utilizar hacks, es necesario, y es nuestro pan de cada dia. Si alguien consigue hacer flotar dos div’s dentro de otro, y k el contenedor tenga su tamaño sin utilizar el hack de overflow:hidden, o el hack de clearfix (div con clear:both), que venga aki y me lo explique.
dewwwwww
P.D.: y si buscabas por hacks para Counter Strike Source: http://www.google.es/search?rlz=1C1GGLS_caES341ES341&sourceid=chrome&ie=UTF-8&q=counter+strike+source+hacks
@Heavy: Vamos a ver… aplicar un clear:both o un !important no es un hack como ya ha comentado Març.
Y no son hacks porque son CSS estándar, es decir y lo explico de nuevo, no provocas un fallo en la interpretación de la hoja de estilos del navegador.
Cuando añades expresiones no estándares en el CSS, estás provocando un fallo que te da el comportamiento que deseas de ese nevagador: ESO es un hack; …luego pues vale, por llamar a las cosas se les puede llamar como se les quiera llamar, si algunos llaman hack a !important o a clear:both… que son reglas estándares, pues allá ellos.
Otro apunte, lo que comento de los hacks no lo digo yo ni me las doy de nada, simplemente lo aprendí de gente como Zeldman, Moll o Budd… obviamente, una vez estudias y entiendes la especificación está más claro que el agua.
Repito, el comportamiento erróneo de IE sobre !important no es un hack: NO se lo provocas tú mediante una hoja de estilos INCORRECTA.
Y muy en referencia a !important… no necesitas ni ese -según lo ves tú, heavy- ni otros hacks; si se conoce la especificación se debe saber que con un estilo estudiado de antemano, una hoja bien estructurada: sobra con aplicar bien la herencia y la especificidad.
Lo que ocurre es que es mucho más complicado y tedioso aplicar especificidad y lo fácil -y por otro lado poco profesional- es aplicar hacks e !important por todas partes.
Así luego suele sale lo que sale 😀
Con todo esto no digo que no haya que usarlos nunca o que a veces, muy en contadas ocasiones, sean útiles. Solo digo que es el recurso fácil y que en la mayoría de ocasiones se usa por desconocimiento de CSS.
Ej: No sé porqué me falla esto -> Busco en Google, encuentro un hack y lo aplico -> Hala, listo.
En lugar de averiguar porqué falla y luego ver si tiene solución de forma estándar… que en muchos casos sorprende ver que sí la tenía y lo fácil que era.
PD: Març… no recuerdo como acabé aquí, mi comentario solo pretende aclarar cuestiones que creo son incorrectas y pueden confundir a alguien. Creo que de ser una crítica, lo era constructiva, y si no las admites lo aceptaré sin problema. Es tu blog y publicas lo que quieres como es lógico.
Me considero algo talibán con los estándares, eso sí que aseguro que es cierto… pero como decía minid, creo que en este mundillo se necesita mucha más profesionalidad, como en cualquier otro trabajo de hecho.
😉
* No pretendo gritar con el uso de mayúsculas, solo es para dar énfasis a lo importante, que podría haber usado strong claro ^^!
No me llamo març, sinó boleteaire (març es “marzo” en catalán) y si en algún momento di a entender que no acepto críticas, lo lamento; como todos sabemos de los errores se aprende y si hay alguien ahí para corregirme dichos errores, pues mejor, que así aprendemos más rápidamente.
Salud
Hola, yo solo quyiero agradecer por este montón de hacks que ha puesta a disposición de todos y todas en la Web. Me ha servido mucho y gracias a los comentarios que han publicado también he aprendido detalles como lo del !important. Yo tengo que usarlo muy seguido porque trabajo con el CMS Typo3 y no se me permite modificar el css original de las extensiones, sino que tengo un css que hace los cambios dependiendo de la sección del sitio. ya que una misma extensión puede funcionar para cosas distintas y lo único que debe cambiar es su presentación visual. Muchas gracias Booletaire.
Muy buen post, la infomacion me fue muy util para cuadrar un div position relative que andaba flotando y fallaba por unos pocos pixels en cada explorador, aun me descuadra un pixel en firefox-linux pero no somos muchos los que lo usamos 😀 gracias por compartir la info.
Hola te comento mi problema:
Tengo este selector en un css
.enlaces {
margin: 0px 0px 0 20px;
list-style:none;
font-size: small;
text-decoration: none;
color: #4d4d4d;
}
Que utilizo en el siguiente código:
<a href="”>
Me funciona bien en Firefox, Safari, Opera. Camino (Firefox y Safari en Mac y Pc) pero no me funciona en IE 7 ni IE 8.
He probado a ponerle los hacks que comentas en este articulo pero no se entera.
¿Alguna sugerencia?.
Muchas gracias por tu colaboración.
Hola te comento mi problema:
Tengo este selector en un css
.enlaces {
margin: 0px 0px 0 20px;
list-style:none;
font-size: small;
text-decoration: none;
color: #4d4d4d;
}
Que utilizo en el siguiente código:
Me funciona bien en Firefox, Safari, Opera. Camino (Firefox y Safari en Mac y Pc) pero no me funciona en IE 7 ni IE 8.
He probado a ponerle los hacks que comentas en este articulo pero no se entera.
¿Alguna sugerencia?.
Muchas gracias por tu colaboración.
Hola te comento mi problema:
Tengo este selector en un css
.enlaces {
margin: 0px 0px 0 20px;
list-style:none;
font-size: small;
text-decoration: none;
color: #4d4d4d;
}
Que utilizo en el siguiente código:
“<a href="”>
”
Me funciona bien en Firefox, Safari, Opera. Camino (Firefox y Safari en Mac y Pc) pero no me funciona en IE 7 ni IE 8.
He probado a ponerle los hacks que comentas en este articulo pero no se entera.
¿Alguna sugerencia?.
Muchas gracias por tu colaboración.
Con el código que me pones no puedo ver nada… Pégame una muestra en jsfiddle
http://jsfiddle.net/
Y pégame el enlace 😉
Buenas a todos
Queria “romper una lanza” a favor del autor de este documento. He leído algunos comentarios que no me han gustado diciendo que quien recurre a hacks es un chapucero básicamente. A ver, esto es como usar la sentencia “goto” a veces es feo pero a veces es lo mas eficiente.
Yo acabo de empezar en este mundo, y llamalé peculiaridades de IE8 me estan volviendo loco, gracias a esto, voy a maquetar toda mi web para firefox primero y cuando este bien, lo retocaré para crear también para IE8. Gracias a los hacks puedo solucionar de forma rápida el poder maquetar la página en un nagegador, validar el sitio web arrancar, y el diseño finalizarlo más adelante. Además si con un hack que pongo en 1 minuto, soluciono comerme 1 hora la cabeza por algo que un cliente no me va a pagar, pues… solo decir que muchisimas gracias al autor, es bueno conocer todas las herramientas para decidir que usar en cada momento.
@ChUsMa permíteme una recomendación:
yo de ti iría mirando en el resto de navegadores periódicamente. No digo que lo hagas cada hora, pero cada día al terminar no está de más ya que si esperas hasta el final, cuando llegue el momento te digo por experiencia que te va a costar mucho más arreglarlo.
Las dos últimas webs en que lo dejé para el final se han quedado sin soporte para IE6 (que actualmente ya no lo doy..) e IE7 por lo terrible que es trabajar con algo tan destrozado. En cambio, si cada vez que haces una sección o un módulo echas un ojo con el resto de navegadores te ahorrarás muchos dolores de cabeza.
A parte de esto, merci por tu comentario
Es agradable ver de vez en cuando gente que sí aprecia lo que aquí hacemos.
Bless
Hola a tod@s.
Recientemente acabo de terminar de codear una pagina y esta casi lista.
Pero he descubierto recientemente un problema con firefox.
Con la tecnica de los slindings doors utilizada en los botones, firefoz me reenderiza un pixel menos.
Es decir con el lado izquierdo no se ajusta con el lado derecho del bg….!!!
Estoy desesperada no se que mas hacer.
Quisiera saber si alguien conoce un hack para firefox para arrelgar estos problemas con los pixeles.
hola, soy totalmente neófito… pero me animé a crear una página en dreamweaver y la veía bien en IE y en firefox… comente a amigos que la visitaran para que me comentasen y me acabo de instalar el google chrome pq me llegó el aviso de que no se ve ninguna imagen…
sabéis el problema que puede ser? si es un hack lo que necesito aplicarla…cual sería y donde habría de situarlo? muchas gracias de antemano, pq alguna cosa de la que aquí se ha hablado me ha servido… pero para este problema no doy con la solución
feliz 2011
Hola eduardo. Por lo que me dices tiene más pinta de ser un fallo en el HTML.
Revisa que estés utilizando Doctype y en caso de estar usándolo asegúrate de que el HTML valide correctamente.
Hecho esto no creo que tengas problemas en que se vean las imágenes correctamente utilizando Chrome.
Salud
Gracias Booletaire, ya he revisado…si es un fallo de html, y no soy quien de interpretar el como solucionar el tema de la validación, entre a validar código en http://validator.w3.org y en todas me da muchos errores y warning… pero eso de que te diga…tienes un error en “i” pero no te diga como has de poner …para alguién que de programación no sabe “na de na” es un imposible.
lo mas que pude hacer es encajar todo en ie, google chrome y moz. firefox con el método tradiciones… prueva/error… y al menos se ven decentemente…
si puede alguién echar un vistazo y sugerirme dejo el enlace para ese alma caritativa:
htpp://www.eduardolucas.e.telefonica.net
entiendo que igual es pedir demasiado, pero gracias de antemano por la ayuda ya prestada
Eduardo, fíjate bien porque sí que te da los errores. Debajo del error y de la línea de este, en todos los casos, verás un párrafo descriptivo para solucionar dicho error.
Eso sí, está completamente en Inglés….
Booletaire ya me di cuenta…y no son pocos…
pero lo que no se es interpretar como arreglarlos…
Te pongo por caso uno:
# Error Line 103, Column 76: element “a.length” undefined
… var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
(el error es en el último ";")
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "” element),
* by using vendor proprietary extensions such as “” or “” (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
pero no me hago idea de como aplicarle la solución que me dan, espero que si me dices como se aplica la solución de este, poder fijarme para solucionar los demás.
Hablo desde la ignorancia, no se si valdrá una solución como ejemplo para los demás.
Ni se si desde dreamweaver se puede solucionar en la opción “editar”.
muchas gracias por tu interés.
Cuando trabajas con un DOCTYPE XHTML (que está basado en XML) tendrás que poner todos los JavaScript entre comentarios CDATA:
http://javascript.about.com/library/blxhtml.htm
Seguramente por eso te están saltando tantos errores con los JavaScript. De hecho, la mayoría de errores que estás teniendo son por culpa de esto, así que en principio englobando cada sección de código con los CDATA debería validar casi por completo.
Ya me dirás qué tal 😉
uffff
toda la tarde… y nada que hacer…
intenté tanto con el CDATA: interno como hacer un javascript externo…
pero de ninguna de las dos formas logré que los rollower funcionasen…
Me imagino que en ambos casos sea problema de códigos, los de la página que me comentaste tampoco me funcionaron…
intentaré mañana buscar en mas sitios, si es que me queda donde mirar.
¿seré yo señor, seré yo? que burrín me siento…
y vaya peñazo que te doy, lo siento
Cómo haces los hover (rollover)?? Los haces con JavaScript?? O con CSS (:hover)?
Si los haces con JavaScript puede que sea culpa del JavaScript, ya que hay navegadores más quisquillosos que otros según cómo escribas el código. Por ejemplo, firefox e internet explorer te permitirán poner un objeto así:
var objeto = {
variable: "value",
class: "class-name"
}
Fíjate que los nombres de las variables están sin comillas. Ésto en Chrome no funcionaría porque la palabra “class” está reservada para otros fines (en los otros también, pero Chrome es más quisquilloso) y por eso habría que ponerlo entre comillas:
var objeto = {
"variable": "value",
"class": "class-name"
}
(En este caso la variable “variable” no hacía falta envolverla con comillas). Por supuesto esto no tendrá mucho que ver con el problema que estés teniendo tú, pero era para que te hicieras a la idea de qué puede estar fallando.
Haz una cosa, abre la consola de Chrome (Control + Shift + J) y en la pestaña “Consola” fíjate en si te da errores. Si no te los da, pasa el ratón por alguna imagen observando la consola y fíjate, porque si el código está mal en algún momento Chrome tendrá que indicarte el error.
Lo hice todo desde dreamweaver. Lo que es el javascript me quedó así:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
cada vez que lo toco los enlaces funcionan pero no hacen el cambio de color los botones (rollover es el nombre que le ponían en el tutorial donde aprendí)…
esto igual me ha venido grande…
vaya, entre la negrita y el azul se ha saltado esto:
y cierro con:
tenía puesto un cierre de:
en la linea siguiente al cierre
pero no una apertura ¿Es necesario incluir …. ?
¿de ser necesario donde estaría su ubicación?
Va a ser como que estas con un parvulario dando clases….;-)
tengo problemas para escribir las lineas de códigos aquí, algunas no se muestran y dejan a el resto del texto como si fuera un enlace directo.
Si me dices como solucionarlo para enviarte el código completo…si es que lo necesitases ver.
(El mensaje #24 no es nada válido.)
muchas gracias por todo… sino aprendo algo te enviare una dirección para que vengas a pegarme personalmente…
Utiliza pastebin.com o jsfiddle.com para colgar el código y luego pásame el enlace.
La otra opción es que utilices las etiquetas de HTML “code” aquí mismo en los comentarios.
parece que pude hacer lo de pastebin.com
el enlace es:
http://pastebin.com/qJiMLVvj
disculpa por llenar el foro de pruebas erroneas…
si puedes, seguro que estará mejor si las puedes quitar.
saludos
Si ese es tu fichero JavaScript debes quitar el tag
<javascript>del principio y el fin del documento.A parte de eso no se me ocurre qué podría ser..
lo que hice fue añadir este código en el htm:
y en el archivo .js puse las “funtions” cortadas y pegadas directamente desde el htm anterior.
He bajado los errores a 16.
creo que ha sido un gran paso para mi, pero no se si se podrán quitar el resto de los errores.
Te dejo en pastebin.com el como me queda el código restante y los errores que me ha dado, para si puedo dejarlo ya así ó hay algo que le pueda hacer:
http://pastebin.com/H2E1Xgkp
Si te doy demasiado la lata, coméntame. Mi problema es residir en un pequeño pueblo y no tener con quien contar.
Muchas gracias por todo.
ups…en toda mi web solo tengo 1 ERROR y es en “index”, lo demás lo tengo todo totalmente arreglado.
el error está en:
Line 105, Column 177: required attribute “type” not specified
✉
The attribute given above is required for an element that you’ve used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element.
Typical values for type are type=”text/css” for and type=”text/javascript” for .
Y me lo da en el símbolo > de después de el 6″
si lleva ó necesita arreglo, me gustaría que me comentases…
Trabaje bastante, pero logré entender todos lo errores menos este, el cual por mucho que busque…siempre que lo arreglo me da error por otro lado..por cierto, el & antés era un & .
muchas gracias por cederme algo de tu tiempo.
para que veas la linea en cuestión:
http://pastebin.com/97k3MvNa
totalmente arreglado, todo validado y 0 errores.
te comento por si alguien tiene el mismo problema de invalidez.
“code” que me habían facilitado:
“”
código correcto:
“”
sigo sin saber como poner aquí los códigos, cuelgo el error y la solución en pastebin.com:
http://pastebin.com/kdaKDhjx
http://eduardolucas.e.telefonica.net
totalmente validado…uffff
gracias por las ayudas prestadas, si hay algo en lo que pueda yo ayudar estaré a vuestra disposición.
Saludos:
Eduardo
A ver Covi:
Soluciona esto sin hacks.
letter-spacing:-0.05em;
o un simple:
height:auto!important;height:100%;min-height:100%;
o otro:
text-shadow:#333 1px 1px 0px;
y….
background:#d82b8f;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e87bba), to(#d82b8f));background: -webkit-linear-gradient(top, #e87bba, #d82b8f));background: -moz-linear-gradient(top, #e87bba, #d82b8f);background: -o-linear-background(top, #e87bba, #d82b8f);background: -ms-linear-background(top, #e87bba, #d82b8f);background: linear-background(top, #e87bba, #d82b8f)
IE es una mierda!
Programamos para Chrome, FireFox, “Opera” y Safari.
Y arreglamos para IE<"9" <– Tambien entre comillas.
Y algún inculto como yo que solo "usamos" HTML4/5, CSS/2/3, JQUERY/-UI, ASP/ASP.NET/PHP, administración de SQL/MySQL… y yo que se más (a si ActionScript/2/3 para Flash/Flex)+ alguna API de FB, Twitter, Google… también lo hacemos para el gran navegador que sigue a IE el super FAMOSO Green Browser. (^o^)
Así que Boletaire te digo "Ho haveu vist!!!" XD
Si los llamamos HACKS pues serán HACKS tanto el !important como _ como /9 como /*\**/
Salu2
Redkram
Muchas gracias! excelente artículo que me ha funcionado a las mil maravillas en mis diseños!!
Joder, ahora (más de dos años más tarde..) releo mis comentarios y pienso “menuda forma de bajarse los pantalones…”.
Covi (i Redkram tb..) la palabra !important no es un hack, hasta que se utiliza como hack.
Y Covi, como bien ha dicho Redkram… y como ya dije yo hace dos años, hay navegadores que son una mierda, y hay cosas que no se pueden solucionar salvo con hacks.
Eso sí, sigo pensando que la mejor vía es un fichero CSS para cada navegador para el que necesitemos hacks…
Hola Booletarie.
A muchos nos das vidilla.
Los comentarios tipo ‘Covi’ (que no aportan nada) lo unico que hacen es frustrar a los que sin ser muy inteligentes (con o sin titulación) intentamos buscarnos las habichuelas en este mundillo.
El tiempo de respuesta a nuestros proyectos está limitados al presupuesto del cliente y a veces no hay tiempo extra para florituras.
Estoy contigo nen.
P.D. lo de bajada de pantalones no es así. Yo lo llamaría educación.
Enhorabuena por tu blog, que como estás comprobando nos ayuda por los siglos de los siglos.
P.D. (otra vez).
Quise decir Booletaire.
Perdon por robaros vuestro tiempo.
Saludos.
Gracias matorral! Comentarios como el tuyo son los que me animan a seguir compartiendo
A ver si pronto me vuelvo a poner, que le tengo ganas ya!
Para los que programéis, podéis estar al tanto de algunas cosillas que voy haciendo nuevas y que no publico aquí desde mi github.
Ah, y “pronto” nuevo diseño de la web y toda hecha en Cake, que ya toca!
hola quetal amigos nececitos ayuda en mi web tengo un slider en el home pero me afecta a mas imagenes que estan en la pagina por que desaparecen y aparecen al compas del slider a
pero solo sucede en chrome en ie9 no.
Gracias!!
me le cago en la madre a todos
opera 12
doesnotexist:-o-prefocus, .example {
color: red;
}
buen puesto
Pues llegue por aqui buscando los hacks para los navegadores. Me lei los comentarios, y quisiera dar mi opinion sin ofender a nadie.
El utilizar “hacks” no es que no sabes CSS o que tenes que estudiarte todo sobre HTML y CSS para poder “maquetar correctamente”, eso solo lo diria alguien que “alguien le conto”, o lo leyo por ahi. Si los mal llamados Hacks no fueran necesarios, no existirian, yo en mis casi 15 años de trabajar desarrollando en la web, nunca un diseño ha funcionado bien en todos los navegadores, por mas “genio” que te creas que eres y la razon es sencilla, cada motor de los navegadores funciona diferente y renderea las cosas de forma diferente, por lo tanto no siempre se van a mostrar las cosas igual, esto es como decir que una pelicula filmada en los 80s se va a ver perfectametne bien en una pantalla de 50″ LED de ahora, los colores, la profundidad del negro, el noise, todo, se ve ligeramente diferente, pues lo mismo es con los navegadores y la maquetacion.
Quisiera ver una pagina compleja que no utilice hacks….
Siendo ésta una publicación antigua me ha servido en varios desarrollos, solo quiero agradecer el post, gracias.
Saludos.
Gracias a ti por tu comentario