5

这个小提琴在真实的浏览器中产生了预期的结果（我试过 FF、GC、Safari），但在 IE9、IE10 和 IE11 中意外中断。IE7或IE8没有问题。

左边是Firefox，右边是IE9-IE11

<div class="root">
    Top
    <div class="footer">Bottom</div>
</div>

.root {
    background-color: red;
    position: absolute;
    height: auto;
    bottom: 0; top: 0; left: 0; right: 0;
    margin: 25px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.footer {
    background-color: green;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
}

如果我删除border-radius或overflow:hidden从父级删除，一切正常。但它到底与固定位置的孩子有什么关系呢？它应该始终相对于视口定位。

它是一个已知\记录的错误吗？其背后的原理是什么？

4

2 回答 2

8

这就是我认为正在发生的事情。

浏览器供应商似乎已经决定fixed关闭溢出的位置元素剪辑，例如它们不被其父元素剪辑。这使事情保持一致，因为fixed元素是相对于窗口定位的，而不是父级。如果应用了裁剪，它将具有相对于窗口的位置/宽度和相对于父级的裁剪。它在视觉上看起来像这样（除了底角应该是圆形的 - 更多内容如下）。

所以：fixed元素，没有溢出剪裁。查看。

但是在 IE9 中发生了一些变化。他们引入了对圆角的支持。现在来谈谈我所说的圆形剪裁。IE9 实际上做到了这一点。现在许多浏览器都会用方角剪辑，即使元素有圆角。这是不好的。显然，IE9 通过检测圆角的存在来解决这个问题，在这种情况下，重新绘制剪辑。当它这样做时，它会犯两个错误。

  1. 它应用剪裁——撤消“fixed元素，没有溢出剪裁”规则。剪裁重新打开，元素现在被父元素的宽度剪裁。

  2. 剪辑只是直接放在元素上，不居中，不考虑剪辑应该来自父级的事实。它只是从 0,0 开始剪裁到指定的宽度和高度——这就是绿色元素出现左对齐的原因——右/下 50px 被隐藏。

修复？

  • 不要fixed在里面筑巢absolute。（最好的解决方案——避免将来出现奇怪的边缘情况）
  • 给父（红色）div 一个宽度。
  • div直接在里面嵌套一个新.root的并移动overflow:hidden到它。小提琴的例子。（干扰最小）
于 2012-10-31T00:52:26.733 回答
0

有同样的问题：

<div class="relative-parent-with-border-radius">
  ...
  <div class="container">
    <div class="fixed-child">...</div>
  </div>
  ...
</div>

通过将.container位置设置为固定-ms-page

于 2017-09-25T10:11:12.227 回答