[code="html"]
<!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" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{ text-align:center;}
.father{ width:300px; height:300px; background:#96F; margin:0 auto; *overflow:hidden; }
.son{ width:400px; height:200px; background:#09F; position:relative; right:100px; top:0px;}
</style>
<body>
<div class="father">
<div class="son">子元素</div>
父元素
</div>
</body>
</html>
[/code]
运用position:relative，在IE7+,chrome,firfox中能很好的实现溢出效果，如下图：
但是在IE6中，父元素却被子元素撑开了了，width值变成了400px; 在这个情况下，子元素right:100px属性作用使其向左移动100px,这点IE6和其他浏览器效果其实一样，由于被撑开，子元素右边出现了100PX和父元素之间的空隙。如下图：
[img]http://dl.iteye.com/upload/attachment/0082/6426/140a5cc3-e75a-333c-a259-fa0c9c6aeee1.jpg[/img]
所以,我们给父元素添加一个overflow:hidden属性,防止在IE6被子元素撑开,但是,在IE7+,chrome,firfox中溢出部分被hidden掉了，IE6却没有。因此我们还得出一个结论：IE6下父元素的overflow:hidden对于具有position:relative属性的子元素无效，但是可以防止被子元素撑开。所以，可以这样写父元素的hack:
[code="html"]
.father{ width:300px; height:300px; background:#96F; margin:0 auto; *overflow:hidden; }
[/code]
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
