css - 位置固定的父子，父溢出 :hidden bug

Question

我不知道是否有问题，但我想知道为什么 overflow:hidden 在 fixed 父/子元素上不起作用。

这是一个例子:

CSS 和 HTML:

.parent{
  position:fixed;
  overflow:hidden;
  width:300px;
  height:300px;
  background:#555;
}
.children{
  position:fixed;
  top:200px;
  left:200px;
  width:150px;
  height:150px;
  background:#333;
}

<div class="parent">
  <div class="children">
  </div>
</div>

现场演示:jsFiddle

Answer 1

您可以考虑使用 CSS clip: rect(top, right, bottom, left); 将固定定位的元素剪辑到父级。在 http://jsfiddle.net/lmeurs/jf3t0fmf/ 查看演示.

当心，小心使用!

虽然剪辑样式得到广泛支持，但主要缺点是:

1. 父级的位置不能是静态的或相对的(可以在相对定位的容器内使用绝对定位的父级)；
2. 直 Angular 坐标不支持百分比，尽管 auto 值等于 100%，即。 clip: rect(auto, auto, auto, auto);;
3. 子元素的可能性至少在 IE11 和 Chrome34 中受到限制，即。我们不能将子元素的位置设置为 relative 或 absolute 或使用 CSS3 transform like scale。

参见 http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/了解更多信息。

编辑:当应用 backface-visibility 时，Chrome 似乎可以更好地处理子元素的定位和 CSS3 转换。 ，所以为了确保我们添加了:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

到主要的子元素。

另请注意，旧版/移动浏览器不完全支持它，否则可能需要一些额外的努力。在 bellafuchsia.com 查看我们的菜单实现.

1. IE8 可以很好地显示菜单，但菜单链接不可点击；
2. IE9 不显示折叠下的菜单；
3. iOS Safari <5 不能很好地显示菜单；
4. iOS Safari 5+ 滚动后重新绘制滚动条上的裁剪内容；
5. FF(至少 13 岁以上)、IE10+、Chrome 和 Android 版 Chrome 似乎运行良好。

编辑 2014-11-02:演示 URL 已更新。