[分享]css兼容模式下溢出隐藏

CSS兼容模式是为了适配一些老旧的浏览器而存在的，它们可能不支持一些新特性，导致在使用时会出现一些问题。其中一个常见的问题就是溢出隐藏不起作用。溢出隐藏是指当元素内部内容超出了元素的大小时，超出的部分...

CSS兼容模式是为了适配一些老旧的浏览器而存在的，它们可能不支持一些新特性，导致在使用时会出现一些问题。其中一个常见的问题就是溢出隐藏不起作用。

溢出隐藏是指当元素内部内容超出了元素的大小时，超出的部分是否可见。CSS提供了overflow属性来控制元素的溢出隐藏，其中有四个值可以选择：visible（不隐藏）、hidden（隐藏）、scroll（出现滚动条）和auto（自动）。

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
} 

在大多数情况下，这种设置是能够正常使用的，但在CSS兼容模式下，却可能出现一些奇怪的问题。比如，在IE6中，当一个元素设置了overflow:hidden，但元素的子元素设置为position:absolute时，子元素不会被隐藏。

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
div span {
  position: absolute;
  left: 0;
  top: 50px;
} 

这时，div元素的显示区域将会被撑开，导致本来应该隐藏的部分出现在了页面上。

解决这个问题的方法比较简单，只需给子元素加上一个父级元素，并把overflow:hidden属性设置在父级元素上即可。

div {
  width: 200px;
  height: 100px;
  position: relative;
}
div p {
  position: absolute;
  left: 0;
  top: 50px;
}
div.overflow {
  overflow: hidden;
} 

此时，子元素就能够正常被隐藏了。

总之，在CSS兼容模式下，我们需要更加小心地处理溢出隐藏的问题，特别是当需要处理子元素的时候，一定要把overflow属性设置在正确的元素上。