奇怪的webkit问题与位置:已修复

Question

http://workshop.wpcoder.com/daniel/tvexperts/

在Chrome中,如果单击"生产",然后单击"联系",则位置:固定标题消失,但在移动滚轮时返回.我不知道原因是什么,到目前为止我只能在Safari和Chrome中检测到它,但Firefox很好,所以我认为它是一个webkit bug.

Answer 1

解决此问题的一种方法是将固定位置元素强制到它们自己的渲染层中.这可以通过应用3d变换来完成,例如:

.navbar-fixed-top {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

希望这可以帮助.

Answer 2

实际上如果你看得很近,在Firefox中也有同样的错误.不同之处在于,它在前面的链接中显示的内容较少.也许你的问题可以解决,在CSS中定义链接的div的最小高度值.

div#contact {
min-height:700px;
height:auto
}

经过本地测试后,我看到了真正的问题:).我在Mac OS X上创建了一个correction.css并在Opera 11,Safari 5,Firefox,3.6,Firefox 4.0 beta 11和Chrome 9中进行了测试.文件包含以下内容:

html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */