При создании шаблона страницы сайта венецианского стиля нередко бывают случаи, когда необходимо создать прозрачный слой, который одинаково отображался бы во всех используемых на сегодняшний день браузерах.
Как известно, главная проблема заключается в том, чтобы "научить" Internet Explorer (IE) наравне со всеми другими браузерами правильно отображать страницу у пользователя.
Пример кода, изложенного ниже, демонстрирует создание и одинаковое отображение такого слоя во всех популярных интернет-обозревателях (в качестве фона для демонстрации скриншота была взята картинка):
<body background="images/img.jpg"> <div style='position:relative;width:320px; height:200px'> <div align="center" style='background:#F0F0F0;width:320px; height:200px;display:inline-block;opacity: 0.7; filter:alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity:0.7'> </div> <div align="center" style='width:100%;position:absolute;left: 50%; top: 50%; margin: -100 0 0 -160;z-index:1'> Наш контент по центру </div> </div> </body>
и результат выполнения этого кода в IE 8.0:
Главный фокус заключается в том, что для включения прозрачности слоя в IE необходимо, чтобы стиль слоя с прозрачностью обязательно содержал параметр:
display:inline-block
RSS/Atom
