size div包含一个未正确定位的缩放div

Question

我很抱歉这个过于具体的问题，但我不知道会发生什么更普遍的问题。显然我错过了什么

看看这个jsbin：

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

请注意，你必须在编辑模式下查看它，出于某种原因（我怀疑与我基本上在jsbin中执行jsbin技术这一事实有关）js在完整视图中逃脱并且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）。

任何想要为这种疯狂辩护的人都会说话......我全都听见了。