html - 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;