Проблеми с фона на Lightbox в IE

Lightboxes се появяват в центъра на екрана с полупрозрачен фон, за да придадат на уеб сайта избледнели фонови ефекти. Докато различните видове лайтбокси използват разнообразно кодиране, всички те използват каскадни стилови листове, за да създадат визуален аспект на ефекта на лайтбокса. Internet Explorer обаче не разпознава CSS.

Lightbox Builds

Повечето lightboxes използват някаква форма на Javascript за ефекта на лайтбокса. Thickbox, например, разчита силно на Javascript чрез използването на jQuery. Обратно, уебсайтът "Мисли Витамин" разполага с лайтбокс, проектиран само с CSS и XHTML. Семантичната CSS3 Lightbox на Александър Доусън също е съвместима с IE. Dawson добави Javascript към кода, за да открие всяка версия на IE по-рано от IE 9; когато се открие версия на IE, тя използва прозрачно PNG изображение вместо CSS, често използвано за прозрачния фон. Можете също да опитате ColorBox от Джак Мур, който също работи в IE 6 до 9.

Фонова непрозрачност в Lightboxes и IE

Версиите на Internet Explorer 8 и по-стари не са съвместими с настоящите CSS стандарти, считано от публикуването им. Липсата на съответствие създава проблем за лайтбокса, по-специално фона на лайтбокса, защото CSS създава непрозрачност по начин, който се показва във всеки друг модерен уеб браузър. Преди CSS3, уеб дизайнерите направиха елемент полупрозрачен, като използваха етикета на атрибута "непрозрачност" или класа в таблицата със стилове, както в:

.background {фон: # 000000; височина: 100% ширина: 100%; непрозрачност: 0.5;}

Горното създава черен фон, който е 50% прозрачен и изпълва страницата.

Промяна на непрозрачността за работа с IE

За щастие, не всичко е загубено, когато става въпрос за настройване на прозрачността на фона на вашия лайтбокс в Internet Explorer. Докато атрибутът "непрозрачност" не работи, "филтъра" се прави. Във всеки елемент, който използва "непрозрачност", добавете атрибута на филтъра, за да направите този елемент полупрозрачен в Internet Explorer, както следва:

.background {фон: # 000000; височина: 100% ширина: 100%; непрозрачност: 0.5; филтър: алфа (непрозрачност = 50);}

Тази корекция работи с Internet Explorer 6 и по-нова и не причинява проблеми с дисплея в други браузъри.

CSS3

Тъй като CSS3 става все по-широко подкрепян, повече светкавици се възползват от неговите разширени функции за дизайн. CSS3 ви позволява да зададете един цвят в елемент като прозрачен, като определите цвета в RGB стойности плюс добавена "алфа" настройка, където непрозрачността е дефинирана между 0 и 1. Например, син фон, който е 50% прозрачен вид като този:

фон: rgba (0, 0, 255, 0, 5);

Internet Explorer 8 и по-старите версии не поддържат тази функция, така че всеки фон на лайтбокса, който използва тази функция, се показва като напълно прозрачен.