overflow:auto 的情况下，position:relative 的兼容性的问题
虽然，理论是可以一套又一套。但是，到了实战中，总会有些莫名其妙的问题，占用了你大量的时间。像Jquery 这样的框架，可以兼容各种各样的浏览器，
可以非常完美的，简洁的进行编程。但是CSS 的设计没有这样简单，没有通用的解决方案。只能靠平时的点滴积累。
虽然，作为一个开发人员，CSS不要求精通，但是，简单的了解了解还是有必要的。最近，遇到的这个问题很简单，可以用下面的例子来表示。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container {
height:100px;
border:1px solid blue;
overflow:auto;
width:300px;
}
#a {
height:200px;
background-color:blue;
float:left;
width:60px;
}
#b {
position:relative;
height:200px;
background-color:pink;
width:60px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container {
height:100px;
border:1px solid blue;
overflow:auto;
width:300px;
}
#a {
height:200px;
background-color:blue;
float:left;
width:60px;
}
#b {
position:relative;
height:200px;
background-color:pink;
width:60px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
你会发现，在ie6 ie7 上，粉色的部分，会超出来。在firefox下面，ie8下面是正常的。
解决的方案和很简单：
在overflow 所在的div 里面，加一个 position:relative; 就可以了。
