opacity in IE8 depends on position:relative
Question
I noticed that in some cases form elements cannot be made transparent in IE8. It turned out to depend on the position:relative CSS tag. The below HTML demonstrates the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<style type="text/css">
.ie-opaque {
zoom : 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
.relative {
position: relative;
}
</style>
</head>
<body>
<div class="ie-opaque">
<form>
<fieldset>
<ol>
<li class="relative">
<label for="test">label</label>
<input id="test"/>
</li>
<li class="relative">
<button>push</button>
</li>
<li>
<label for="test">label</label>
<input id="test"/>
</li>
<li>
<button>push</button>
</li>
</ol>
</fieldset>
</form>
</div>
</body>
</html>
In IE8 items 3 and 4 are transparent, 1 and 2 are not. Any idea why?
2 answers
solution1
5 ACCPTED 2012-11-07 11:58:00
In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent.
Workarounds:
- IE9: Give the parent a non-static position.
- IE8: Have the child inherit the filter style.
- IE7: Have the child inherit the filter style and give the parent a non-static position.
Linked from here:
solution2
0 2011-07-05 14:41:34
Using classes with "li" is bad practice as they were designed for listing similar information with a similar appearance, I'm assuming MS chose to ignore support for child elements with ie8 that use classes & id's that shouldn't.
I would suggest using pseudo classes (effects won't show on <=IE8 browsers), or javascript if you need to target specific li's.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.