3d - CSS3 3D 转换发生水平溢出

Question

我在 http://mr.si/ 上有问题使用 CSS3 3D 转换。我这样做显然是为了好玩和探索新的 CSS 功能，但它让我感到不安。

当您将鼠标悬停在一行中的最后两项上时，就会出现问题。除了想要的效果之外，还发生了一些不希望发生的事情 - 元素显着水平溢出并且出现水平滚动条，这一点都不令人愉快。

也许它是一个 WebKit 错误，但它出现在最新的 Chrome 开发人员版本和 Safari 5 中，所以可能不是。

知道我做错了什么吗？

编辑: 值得注意的是我更改了网站所以这不再相关 :P

Answer 1

说实话，你的问题让我大吃一惊，对我来说它看起来像是一个浏览器错误。

不过，我找到了一个简单的修复方法:

#main section {
overflow: hidden;
// the rest of your css declarations
}

它更像是一个补丁，而不是解释为什么它会做奇怪的事情，但我希望它能有所帮助。

干杯!

编辑:用....解决了它

header[role="banner"], #main, #main + footer {
  overflow: hidden;
  padding: 0 20px;
  //yourcode
}