IE/Win: relatively positioned parent and floated child – disappearance

来源：互联网发布：js隐藏视频播放进度条编辑：程序博客网时间：2024/06/07 07:52

盒子的位置根据正常流来计算 (this is called the position in normal flow) 。然后盒子根据它在正常流中的位置进行偏移。当一个盒子B是相对定位的，后面的盒子的位置会根据盒子B偏移之前的位置进行计算。 (CSS2.1 9.3.1)

不同类型的消失 (Different kinds of disappearance)

一些bugs会引起元素在IE中消失。有一点可以区分是渲染不稳定还是元素消失的无影无踪。

元素不完全或根本没有渲染，但是在 on scrolling ， selecting ，resizing of the window 时会重新出现 (as in thePeek-a-boo bug family)；
元素意料之外的在其他元素后面隐藏，或者元素停止了可视化渲染。

这篇文章关注的是后面那个问题。当元素不可挽回的消失在IE中，最有可能是由于三种属性被引入了：positioning ，floating 和 clearing 。甚至 absolutely positioned 元素在某种情况下也会消失。接下来的例子关注 relatively positioned parents 和它们的 floated children 。

Example: A floated child hides behind its non-layout parent

相对定位的父元素包含浮动元素，由于 clearing element 。浮动元素有 "layout" ，但是相对定位的父元素没有。父元素向左偏移。父元素所在层使用一个透明背景图。当鼠标划过链接，浮动元素展开，使它可以接触到 clearing element (这样就会把父元素撑开)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css">body {background: #404040;color: #F0F0F0;margin: 0;width: 100%;font: 100.01%/1.5 Optima,'Lucida Grande','Luxi Sans',Lucida,'Lucida Sans Unicode',sans-serif;}.wrapper {background: #404040;margin: 0 2em 1em 24%;max-width: 50em;min-width: 20em;}a {color: #D0D0D0;}a:hover, a:active {color: #FFFFFF;}.rp_parent {position: relative;left: -5em;margin: 2em 0 0 5em;background:url(transparent.gif);border: 2px solid #00f;padding: 0.5em;}.fl_child {float: right;width: 50%;background: maroon;padding: 0.5em;}hr.clear {display: block;clear: both;}a.expand {display: block;text-align: center;zoom:1 ;/* max clickable area */}a.expand:hover {padding-top: 20em;}.lorem {text-align:justify;}</style><body><div class="wrapper"><div class="rp_parent"><h3>r.p. parent</h3><div class="fl_child"><h3>floated child</h3><a href="#" class="expand">~ expand ~</a></div><p class="lorem">Sed diam ante, commodo non, pharetra semper, laoreet in, nibh. Morbi pharetra turpis sed nisl. Cura bitur non enim. Etiam tempus quam. Sed auctor lorem et nunc. Sed ultri cies, pede sit ameteleifend rhoncus, lacus purus viverra sem, sed venenatis mi metus eu justo. Prae sent vesti bulumfringilla tellus. Sed egestas erat vitae ante. Cras fringilla risus non neque. Nunc mauris. Suspendisse tempus consec tetuer erat.</p><hr class="clear"><p>clearing hr</p></div></div></body>

描述

在IE6中，先绘制浮动元素，当浮动元素绘制完成后，父元素才开始绘制。父元素内的段落P的边界线包裹这预期的位置。然而，浮动的子元素却没有得到偏移量。

相对定位的父元素是否完全按照定义的margin来显示，取决于它是否被它的浮动的子元素展开，也就是，浮动元素是否毗邻着固定的清楚浮动的元素 (solid clearer) 。

Example:A relatively positioned parent ceases rendering and disappears

基本上和上例相同的设置，但是：这里在浮动元素和clearer之间没有任何元素 -- 除了一个link 。并且，link 的 :active 伪类通过 display:none 移除它自己 (这是模拟当在clearer和浮动元素之间没有内容分拆时的问题)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css">body {background: #404040;color: #F0F0F0;margin: 0;width: 100%;font: 100.01%/1.5 Optima,'Lucida Grande','Luxi Sans',Lucida,'Lucida Sans Unicode',sans-serif;}.wrapper {background: #404040;margin: 0 2em 1em 24%;max-width: 50em;min-width: 20em;}a {color: #D0D0D0;}.rp_parent {position: relative;left: -5em;margin: 2em 0 0 5em;background: url(transparent.gif);border: 2px solid #00f;padding: 0.5em;}.fl_child {float: right;width: 50%;background: maroon;}hr.clear {display: block;clear: both;}a.donot:active {display: none;}</style><body><div class="wrapper"><div class="rp_parent"><div class="fl_child"><h3>floated child</h3></div><a class="donot" href="#" >~ don't click ~</a><hr class="clear" /><p>clearing hr</p></div></div></body>

描述：

IE7beta3:上面的框消失了。当滚动出视线在回来，有时靠近浮动元素的1em的线没有出来 (蓝色边框和 dotted background 消失了)。如果点击了 link ，相对定位的父元素和它所有的子元素都消失了。

IE6:一样的问题，但是浮动元素保持可见。(bug in the bug) 。

毫不相干的，但是让人气愤的：IE保持链接的 active-state ，甚至当用户离开页面再回来。

变通方案？(A workaround?)

我们可以触发 "hasLayout" 通过给父元素增加，例如，一个尺寸 (a dimension) 或者 zoom:1 。但这会促使父元素自动装入浮动元素，甚至当没有清楚浮动的元素时也这样。这就是自动包含bug in IE/Win : 通过设计，"layout" 创建一个新的块级格式化上下文 (a new block formatting context) 。

在适当的设计情况下，当给元素指定 hasLayout 不是一个选项时，在源码中，如果浮动元素没有与clearer挨着，IE6和IE7会被更稳定的渲染，也就是说，用额外的元素把浮动元素和 clearer 分隔开。

总结

一个包含浮动子元素的相对定位包含框，需要获得 "layout" 来控制浮动元素。否则，整个层，偏移(offset) 还有宽度会出现意料之外的结果。

原文地址：

http://www.satzansatz.de/cssd/rpfloat.html#