Problemas de fondo de la caja de luz en IE

Los lightboxes aparecen en el centro de la pantalla con un fondo semitransparente para dar a un sitio web un efecto de fondo descolorido. Si bien los diferentes tipos de lightboxes utilizan códigos variados, todos usan hojas de estilo en cascada para crear el aspecto visual del efecto lightbox. Internet Explorer, sin embargo, no reconoce el CSS.

Lightbox Builds

La mayoría de los lightboxes usan alguna forma de Javascript para el efecto lightbox. Thickbox, por ejemplo, depende en gran medida de Javascript mediante el uso de jQuery. A la inversa, el sitio web "Think Vitamin" presenta una caja de luz diseñada utilizando solo CSS y XHTML. El semántico CSS3 lightbox de Alexander Dawson también es compatible con IE. Dawson agregó algo de Javascript al código para detectar cualquier versión de IE anterior a IE 9; cuando se detecta una versión de IE, utiliza una imagen PNG transparente en lugar de CSS comúnmente utilizada para el fondo transparente. También puede probar ColorBox by Jack Moore, que también funciona en IE 6 a 9.

Opacidad de fondo en lightboxes y IE

Las versiones 8 y anteriores de Internet Explorer no son compatibles con los estándares actuales de CSS, a partir de la publicación. La falta de cumplimiento crea un problema para las cajas de luz, específicamente los fondos de la caja de luz, porque CSS crea opacidad de una manera que se muestra en cualquier otro navegador web moderno. Antes de CSS3, los diseñadores web crearon un elemento semitransparente utilizando la etiqueta o clase de atributo "opacidad" en la hoja de estilo, como en:

.background {fondo: # 000000; altura: 100% ancho: 100%; opacidad: 0.5;}

Lo anterior crea un fondo negro que es 50 por ciento transparente y llena la página.

Modificando la opacidad para trabajar con IE

Afortunadamente, no todo está perdido cuando se trata de configurar la transparencia del elemento de fondo de su caja de luz en Internet Explorer. Mientras que el atributo "opacidad" no funciona, el "filtro" sí funciona. En cualquier elemento que use "opacidad", agregue el atributo de filtro para que ese elemento sea semitransparente en Internet Explorer de la siguiente manera:

.background {fondo: # 000000; altura: 100% ancho: 100%; opacidad: 0.5; filtro: alfa (opacidad = 50);}

Esta solución funciona con Internet Explorer 6 y superiores, y no causa ningún problema de visualización en otros navegadores.

CSS3

A medida que CSS3 es cada vez más compatible, más lightboxes aprovechan sus características avanzadas de diseño. CSS3 le permite establecer un solo color en un elemento como transparente al definir el color en valores RGB más una configuración "alfa" agregada, donde la opacidad se define entre 0 y 1. Por ejemplo, un fondo azul que es 50% transparente se ve Me gusta esto:

fondo: rgba (0, 0, 255, 0.5);

Internet Explorer 8 y las versiones anteriores no admiten esta función, por lo tanto, cualquier fondo de lightbox que use esta función se mostrará como completamente transparente.