IE overflow-hidden失效的解决方法

IE 下 CSS overflow:hidden 失效之谜

当我们面对一个 IE 浏览器下的 CSS overflow:hidden 属性失效的问题时，尤其是在父元素的直接子元素或下级子元素拥有 position:relative 属性时，我们可能会遇到一些挑战。在 IE 6 中，这个问题表现得尤为明显，子元素会超出父元素设定的高度，即使父元素已设置了 overflow:hidden。这其实是一个浏览器兼容性问题。

解决这个问题的一种有效方式是，在父元素中使用 position:relative。当我们在父元素中引入相对定位时，overflow:hidden 属性会正常工作，子元素的超出部分会被正确隐藏。这是因为在相对定位下，子元素的位置相对于其正常位置进行偏移，但仍然保持在文档流中，这样父元素的 overflow 属性就能正常发挥作用。

对于更深入的理解和应用，我们可以采用一种策略：子元素设置绝对定位，父元素相对定位。这种搭配方式可以使 overflow:hidden 发挥预期作用，防止内容溢出。当子元素被设置为绝对定位时，它们的位置不再受正常文档流的影响，而是相对于最近的已定位祖先（如果存在的话）进行定位。如果找不到已定位的祖先元素，那么它们就会相对于初始包含块进行定位。在这种情况下，overflow:hidden 能有效地隐藏超出父元素的内容。

让我们看一个具体的例子。在 kaluli 新版首页的 slide 项目中，出现了一个在 IE 下所有图片都显示出来的问题，无法实现溢出隐藏。经过调查，问题出现在