html - 在页面 anchor 链接导致整个内容 div 移动

Question

这么奇怪的问题...

http://www.casterconcepts.com/caster-wheels/cast-iron-wheels/ (点击“查看系列”为例)

无论何时(在站点范围内)单击 anchor ，它都不会将屏幕空间移动到正确的 ID，而是将整个内容部分向上移动并移出站点。

我这辈子都想不通为什么。

Answer 1

这是因为#main:after 中的css 行。具有百分比值的绝对位置和宽度导致滑动并被#main 的溢出控制隐藏。

#main {
    width:1000px;
    position:relative;
    overflow:hidden;
    min-height:500px;
    margin:0 auto;
    padding:0 10px;
}

#main:after {
    content:" ";
    position:absolute;
    width:75%;
    background:#fff;
    left:10px;
    top:0;
    height:50000px;
    box-shadow:0 0 15px rgba(0,0,0,0.3);
}