Hi,
Perhaps I can explain 
The answer to the question as is always the case with IE is the “haslayout” issue.
If we take your example and expand it you will see that it actually works fine in iE6/7.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none}
li{float:left;margin:10px;}
a,span{display:block;}
span{padding:10px;background:red}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>test</span></a></li>
<li class="test"><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
</ul>
</body>
</html>
The anchor and span are display:block and the list is fine and works as expected (unlike what you suggested would happen).
The problem only arises when the anchor or the span gets haslayout.
e.g. If we add a height to the span.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul{margin:0;padding:0;list-style:none}
li{float:left;margin:10px;}
a,span{display:block;}
span{padding:10px;background:red}
.test span{height:100px}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>test</span></a></li>
<li class="test"><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
</ul>
</body>
</html>
Now the layout is completely broken because the span achieves layout and an element with layout will try and be 100% wide and as a result it makes that span the remaining 100% width of the viewport thus displacing all other floats.
If on the other hand you gave the span a width then even though it has layout the width is no longer 100% (or more correctly auto) and the layout once again starts working properly.
You may then ask that why doesn’t floating the span cause the layout to break because a float gives an element layout? The answer is again related to width and floats are shrink to fit and the floated element doesn’t try to be 100% wide.
So the answer to your question is that when element inside a float have layout but don’t have their dimensions controlled then they will expand to 100%.
That’s why the problem can be solved by simply floating the list and its children rather than using display:block. Or where possible using widths and avoid all bugs.
If you float a right floated element inside a left floated element in iE6/7 then once again you trigger the 100% effect and things are broken.
The float ends up on the right side of the screen in IE6/7.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
margin:0;
padding:0;
list-style:none;
}
li {
float:left;
}
a {
float:right;
background:red
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>test</span></a></li>
</ul>
</body>
</html>
The solution is to float both to the left.
There is an opposite bug where you float all the items to the right and IE6/7 lines then vertically because this time it takes the parents floated width as a constraining factor and won’t align them horizontally.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
margin:0;
padding:0;
list-style:none;
}
li,a,span {
float:right;
}
li{margin:0 10px}
span {
background:red
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
</ul>
</body>
</html>
In IE6/7 the floats are all on the right but align vertically and not horizontally.
The solution perversely enough is to float the inner elements to the left instead which doesn’t trigger the effect that we saw earlier when you floated left and then right.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
margin:0;
padding:0;
list-style:none;
}
a,span {
float:left;
}
li{float:right;margin:0 10px}
span {
background:red
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
<li><a href="#"><span>test</span></a></li>
</ul>
</body>
</html>
That’s all there is to it - I’m surprised that everyone doesn’t know this
(Have a look at one of the recent CSS quizzes where we discuss alternate solutions.)