IE8 Background colors on :hover on child elements not showing
Posted by Dan Eastwell
A quick test of IE8 shows a 'bug' ( It may be correct behaviour, it's not clear from the spec), where if you have two floated elements (e.g. an a, containing a span), the background colour for the child element will not show on the hover state, if the background-color for the normal state is not specified.
See this test case for an example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style>
body{ font-family:sans-serif;}
a{
background-color:#ffcc00;
color:#000;
padding-left:10px;
text-decoration:none;
float:left;
}
a span{
float:left;
}
a:hover{
color:#fff;
text-decoration:underline;
}
a:hover span{
background-color:#000;
}
</style>
</head>
<body>
<a href="#">
<span>Text</span>
</a>
</body>
</html>
Specifying the background-color on the span in this example will cause the a:hover span background-color to show. Setting it to transparent will not.
