CSS3 翻译问题溢出答案

【问题标题】：CSS3 translate issue OverflowCSS3 翻译问题溢出
【发布时间】：2013-05-02 20:19:51
【问题描述】：

首先，这是一个 jsfiddle 来说明我的问题：http://jsfiddle.net/EKxkx/ 我不知道为什么在 jsfiddle 上，css 翻译仅适用于 chrome，但在实时版本中，问题仅在 Firefox 下可见，如下所示：http://helveticventure.com/startupweekend/v4/test.html

我正在使用 ez-css 框架 (ez-css.org)。采用以下布局：

----------
|   1    |
----------
|   |    |
| 2 |  3 |
|   |    |
----------
|   4    |
----------

当我放一个 -webkit-transform: translate(0, 30px);对于第 2 块和第 3 块，它们的行为方式不同。

当方块 2 在方块 4 上方移动时，方块 3 在方块 4 下方移动。我要归档的行为是块 3 使用的 on。两个块都移动到块 4 下方。但我真的不知道如何。

感谢您的帮助！

埃里克

【问题讨论】：

您是在寻找更多关于错误的解释或解决方法吗？
我试图了解为什么会出现这种行为，最终能够找到解决方法。
所以作为一种解决方法，定义 position: relative 以阻止 #4 或在块容器 #2 和 #3 上使用 overflow:hidden（我在最新的 chrome 上都试过了）
非常感谢您的帮助！
+1 链接的网站让我笑了很多：D

【解决方案1】：

Fabrizio Calderan 的回答完美！

我添加了：

.ez-last{
  overflow:hidden;
}
.ez-fl{
  overflow:hidden;
}

并且知道第 2 区正在第 4 区下方移动。

埃里克

【讨论】：