html - 包含缩放 div 的大小 div 定位不正确

Question

对于过于具体的问题标题，我深表歉意，但我不知道会发生什么更一般的事情。显然我遗漏了什么

看看这个 jsbin:

http://jsbin.com/aguhux/1/edit

请注意，出于某种原因(我怀疑与我基本上在 jsbin 中执行 jsbin 技术这一事实有关)，您必须在编辑模式下查看它)js 在完整 View 中转义并 munges页面。

我有的基本上就是

p{slipsum text}
div#preview (hard coded height, width)
  div (css3 scale transform)
     iframe
p{slipsum text}

iframe 的内容是动态构建的，并且还手动设置了它们的高度和宽度。

#preview 的空间已在流内容中正确分配，但出于某种原因，它的子项会脱离容器并覆盖底部段落。

到底为什么会这样？我该如何阻止它？

这在 chrome 和 firefox 中都会发生，所以我知道这不是浏览器错误。

Answer 1

好的，我想通了 - 它与缩放有关。

Here's the working jsbin

显然，当你缩放一个元素时，你缩放了它的内容，但元素本身仍然是如果内容没有被缩放时的大小(为什么这将是默认功能超出了我的理解)。因此，解决方案是通过 scalingFactor*originalHeight 也将所有内容向上移动 - 这使您可以垂直定位。出于某种原因要水平定位，您必须向左平移 scalingFactor*expectedWidth(应该是 scalingFactor*scalingFactor*originalWidth)。

任何想为这种疯狂行为辩护的人......我洗耳恭听。