Noticed buggy behavior with rendering in IE8 standards mode. From what I can
tell, it looks like when opacity filter is applied to a parent element,
a:hover styles for the child elements aren't getting applied properly.
Here's the html markup that can be used to reproduce the problem. In the
first example, items turn red on hover as expected. In the second example,
items don't turn red on hover (caused by opacity filter). Make sure you set
to IE8 standards mode.
<!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=ISO-8859-1">
<style type="text/css">
body { background:
url(
http://cdn-0.nflximg.com/us/pages/me...ette_cereb.jpg)
no-repeat; width: 950px; }
h1 { margin: 10px 200px; text-align: center; }
.bar { padding: 20px; border: 1px solid black; }
.foo a { background-color: yellow; display: block; padding: 2px; border:
1px solid black; }
.foo a:hover { background-color: red; color: #666; paddings: 10px; }
#ex1 { background-color: white; width: 700px; }
#ex1 { position: absolute; left: 100px; top: 100px; }
#ex2 { background-color: white; width: 700px; }
#ex2 { position: absolute; left: 100px; top: 300px; }
#ex2 {
opacity: .70;
filter: alpha(opacity=70);
filter: progid
XImageTransform.Microsoft.Alpha(opacity=70 );
-moz-opacity: .70;
}
</style>
</head>
<body>
<h1>Example of opacity hover bug in IE8 standards mode</h1>
<div id="ex1" class="bar">
<span>Item background turns red on :hover as expected</span>
<div class="foo"><a href="#">Item1</a></div>
<div class="foo"><a href="#">Item2</a></div>
<div class="foo"><a href="#">Item3</a></div>
</div>
<div id="ex2" class="bar">
<span>Using opacity filter. Item background <em>don't</em> turn red on
:hover.</span>
<div class="foo"><a href="#">Item1</a></div>
<div class="foo"><a href="#">Item2</a></div>
<div class="foo"><a href="#">Item3</a></div>
</div>
</body>
</html>
Linear Mode
