Меню
Что нового?

CSS, прозрачность, проблема с IE8

Crys

Crys

Двинутый новичок
CSS, прозрачность, проблема с IE8

1) В случае, если IE8 работает в нормальном режиме - при задании прозрачности для элемента, вложенные элементы на это не реагируют, если для них задано позиционирование (в моем случае, relative).

Пример:
Код: 
<div id="test">
  <div style="position:relative">first</div>
  <div>second</div>
</div>
Если задать прозрачность для #test - блок с текстом first останется непрозрачным

2) Если IE8 работает в режиме совместимости с IE7 - прозрачность вообще ведет себя странным образом. Иногда устанавливается, иногда нет.

Пример (полный):

Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
[b]<meta http-equiv="X-UA-Compatible" content="IE=7" />[/b]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
</style>
</head>
<body>
<p>text</p>
</body>
</html>
Не работает.


Как правильно реализовать прозрачность для IE8?
 

Sawa

Новичок
читаем маны... в нотах к релизу это было:
Код: 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=)";
в нашем случае
Код: 
p {
   filter:alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: .3;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
 
Crys

Crys

Двинутый новичок
читаем маны... в нотах к релизу это было:
Нажмите для раскрытия...
Это работает только в случае работы IE в обычном режиме. И в этом случае возникает проблема с вложенными элементами, у которых задано позиционирование (relative, absolute)

Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p {
   filter:alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: .3;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
</style>
</head>
<body>
<p>text
<a style="position:relative" href="#">sss</a>
</p>
</body>
</html>
В данном примере text - с прозрачностью, ссылка sss - нет!
В случае, если выставить режим совместимости с IE7 - прозрачность не работает.
То есть все тоже самое, что и без использования -ms-filter
 

Sawa

Новичок
не совсем тоже самое, этот ms-filter нужен для совместимости с другими браузерами

в мсдн написано:

An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and/or width. However, there are several other properties that can give an element layout. For more information on these other properties, see the hasLayout property.

The shadow filter can be applied to the img object by setting the filter on the image's parent container.

данный механизм оч багнутый, в IE6 тормозит, в 7 появляются артефакты на страницах. наследие для группы детей не работает(p * {} ), т.к. при обработке каждый вложенный элемент будет на X прозрачнее родителя, где X определяется стилем. Если делать анимацию через прозрачность, сложным блоком, с большим количеством элементов можно повесить браузер (ie\ff\opera)


UPD:
ссылка

достаточно подробно разжевана проблема с ие7-8 девелоперами, причем на русском
 
Войдите или зарегистрируйтесь для ответа.
Сверху