哈希(#)链接导致内容跳跃 - 为什么?

See*_*ode 4 html css

好吧,通常我对CSS非常好.但是这一个...我无法完全理解为什么会发生这种情况.

我确实找到了几个"快速修复",但我不想只是为了做某事而做某事,所以如果有人能帮助我理解这个异常,请挺身而出(我试过在网上搜索和低,并没有找到任何关于这个)!!

使用哈希(#)/锚链接时会出现此问题.我把小提琴放在一起,以便更好地解释发生了什么.

首先,请访问:http://jsfiddle.net/GKCE6/5/show.看起来不错吧?

现在让我们将哈希(#)符号添加到URL:http://jsfiddle.net/GKCE6/5/show/#some-content.标题就消失了!走了!纳达!

有任何想法吗?我注意到如果我overflow:hidden从中删除规则div#container,标题会回来.不过,我正在研究的项目需要overflow:hidden规则来消除水平滚动.我可能会做类似的事情overflow-x:hidden,但就像我在开始时说的那样,我宁愿尝试理解为什么会这样,所以我可以确定适当的修复.

还有其他人遇到过此吗?

小提琴:http://jsfiddle.net/GKCE6/5

小智 5

你的代码的问题是固定的高度#container.内容大于1000px您设置的内容.当页面跳转到该#content部分时,它向下移动浏览器将重点放在填充整个页面的内容部分1000px.如果设置height:auto#container它会工作.这将允许你保持overflow: hidden