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

最新推荐文章于 2023-04-28 12:35:54 发布

iteye_18183

最新推荐文章于 2023-04-28 12:35:54 发布

阅读量228

点赞数

分类专栏： Web前端文章标签： javascript 子元素撑开 ViewUI

本文链接：https://blog.csdn.net/iteye_18183/article/details/82442123

版权

Web前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在一些被常规的页面布局当中，我们常常需要通过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: