Chrome中的CSS显示高？

Question

嗨，我刚刚开始写一个页面，我遇到了一个前所未有的障碍，我不确定我做了什么。这个小提琴http://jsfiddle.net/4Fbpu/在FF，Opera和IE 9中显得很好（令人惊讶）。但在Chrome中，内容从标题和包装器之间开始。有人知道造成这种情况的原因以及如何解决这个问题吗？

Answer 1

首先，尝试降低测试用例的复杂性。我在这里做了一个更简单的测试：http://jsfiddle.net/guitarzan/PqvKR/4/

我认为这是Chrome中的渲染错误。它将浮动ul视为position:absolute，但仅当其高度小于或等于其包含父项的负（顶部）边距时。将其高度增加到大于50px并重新弹回原位。见这里：http://jsfiddle.net/guitarzan/PqvKR/6/

所以我找到了两个解决方案：

1. 将高度添加到51px或更高的ul。这对你的设计来说可能太高了，所以你必须调整其他东西，或者......
2. 在ul周围添加另一个元素，并为其指定一个大于0px的高度。

此处的测试解决方案：http://jsfiddle.net/guitarzan/4Fbpu/13/