Chrome、Opera 和 Safari 中的奇怪渲染问题

Question

伙计们，我很困惑。我制作了一个使用 CSS 动画和一些非常基本的 Javascript 的 HTML 页面。虽然我确信我没有以最好/最有效的方式完成它（对此仍然有点新），但它足以让我满意，但在 Chrome、Safari 或 Opera 中运行时，我遇到了一些元素如何呈现的间歇性问题。

现场示例：http://careers.dept.shef.ac.uk/MOOCs/STAR/

向下导航到“解决问题的技能”，然后从那里导航到“沟通技巧”或“领导技能”。位于问题解决技能底部的导航按钮仍然可见。但它们实际上并不存在……如果我按 Ctrl+A，它们就会消失。你不能点击它们，它们就在那里。

我已经在几台 PC 上尝试过，但遇到了同样的问题。有时它根本不会发生。它似乎不会发生在 IE 或 Firefox 上。是否与这些浏览器如何渲染元素以及它们如何处理不透明度有关？

非常感谢。

编辑：这是一个屏幕截图：http://i.stack.imgur.com/FPtGQ.png

Answer 1

这是一个很长的尝试，但是您在这些按钮上的 HTML 格式不正确，尝试修复它并看看会发生什么：

<p class="btnText">Communication skills</p class="btnText">

应该是：

<p class="btnText">Communication skills</p>

编辑

好的，尝试将此样式添加到 .example2：

height: 100%;

并将溢出更改为：

overflow:hidden;