Problemas de fundo da caixa de luz no IE

As caixas de luz aparecem no centro da tela com um fundo semitransparente para dar a um site um efeito de segundo plano desbotado. Embora diferentes tipos de mesas de luz usem codificação variada, todas elas usam folhas de estilo em cascata para criar o aspecto visual do efeito lightbox. O Internet Explorer, no entanto, não reconhece o CSS.

Lightbox Builds

A maioria das mesas de luz usa alguma forma de Javascript para o efeito lightbox. O Thickbox, por exemplo, depende muito do Javascript através do uso do jQuery. Por outro lado, o site "Think Vitamin" apresenta uma mesa de luz projetada usando apenas CSS e XHTML. O lightbox semântico CSS3 de Alexander Dawson também é compatível com o IE. Dawson adicionou um pouco de Javascript ao código para detectar qualquer versão do IE anterior ao IE 9; Quando uma versão do IE é detectada, ela usa uma imagem PNG transparente no lugar do CSS comumente usado para o plano de fundo transparente. Você também pode tentar ColorBox por Jack Moore, que também funciona no IE 6 a 9.

Opacidade de plano de fundo nas caixas de luz e no IE

As versões 8 e anteriores do Internet Explorer não são compatíveis com os padrões CSS atuais, a partir da publicação. A falta de conformidade cria um problema para as mesas de luz, especificamente os planos de fundo lightbox, porque o CSS cria opacidade de uma maneira que é exibida em todos os outros navegadores da Web modernos. Antes do CSS3, os Web designers criavam um elemento semitransparente usando a tag ou classe de atributo "opacidade" na folha de estilos, como em:

.background {fundo: # 000000; altura: 100% largura: 100%; opacidade: 0.5;}

O texto acima cria um plano de fundo preto que é 50% transparente e preenche a página.

Modificando a opacidade de trabalhar com o IE

Felizmente, nem tudo está perdido quando se trata de configurar a transparência do seu elemento de plano de fundo lightbox no Internet Explorer. Enquanto o atributo "opacidade" não funciona, o "filtro" faz. Em qualquer elemento que use "opacidade", adicione o atributo filter para tornar esse elemento semitransparente no Internet Explorer da seguinte maneira:

.background {fundo: # 000000; altura: 100% largura: 100%; opacidade: 0, 5; filtro: alfa (opacidade = 50);}

Essa correção funciona com o Internet Explorer 6 e superior e não causa problemas de exibição em outros navegadores.

CSS3

À medida que o CSS3 se torna mais amplamente suportado, mais lightboxes aproveitam seus recursos avançados de design. O CSS3 permite que você defina uma única cor em um elemento como transparente definindo a cor nos valores RGB mais uma configuração "alfa" adicionada, em que a opacidade é definida entre 0 e 1. Por exemplo, um plano de fundo azul com 50 porcento de aparência transparente como isso:

fundo: rgba (0, 0255, 0, 5);

O Internet Explorer 8 e versões anteriores não suportam essa função, portanto, qualquer plano de fundo de lightbox que usa essa função é exibido como completamente transparente.