IE6下position定位子元素溢出，父元素被撑开的解决思路。(转)

pucxin

浏览: 66596 次
性别:
来自: 北京

最近访客更多访客>>

gxd274264957

awangjun

floger

wenrouedao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

javascript 子元素撑开

在一些被常规的页面布局当中，我们常常需要通过position定位HTML元素来实现我们想要的效果。但是在这个办法在IE6中常常会出现各种问题。例如，我们想让一个子元素溢出其父元素之外显示，而影响父元素本身和其他兄弟元素的样式，我们可以这样写：

<!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>

运用position:relative，在IE7+,chrome,firfox中能很好的实现溢出效果，如下图：

但是在IE6中，父元素却被子元素撑开了了，width值变成了400px; 在这个情况下，子元素right:100px属性作用使其向左移动100px,这点IE6和其他浏览器效果其实一样，由于被撑开，子元素右边出现了100PX和父元素之间的空隙。如下图：

所以,我们给父元素添加一个overflow:hidden属性,防止在IE6被子元素撑开,但是,在IE7+,chrome,firfox中溢出部分被hidden掉了，IE6却没有。因此我们还得出一个结论：IE6下父元素的overflow:hidden对于具有position:relative属性的子元素无效，但是可以防止被子元素撑开。所以，可以这样写父元素的hack:

1	.father{ width:300px; height:300px; background:#96F; margin:0 auto; _overflow:hidden; }

在verflow:hidden前加个只有IE6才能识别的下划线，就OK了。

分享到：

多设备的Web布局模式(转) | Yahoo!网站性能最佳体验的34条黄金守则—— ...

2012-11-13 18:04
浏览 1665
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论