链接到 div 的 ID 从 div 的顶部下方开始？答案

【问题标题】：Linking to ID of div starts below top of div?链接到 div 的 ID 从 div 的顶部下方开始？
【发布时间】：2013-04-22 13:14:36
【问题描述】：

我有一个 div，我通过 'href="#divId"' 链接到它，而不是链接到 div 的顶部，它下降了大约 100 像素。我知道它从 div 的顶部下方开始，因为 div 的背景延伸到页面链接的上方。这是一个已知问题吗？

    #homepage_aboutstrip {
        background:url('home/images/gradient-about-background.png');
        background-repeat:repeat-x;
        background-size: auto 100%;
        position:absolute;
        margin-top:200px;
        width:100%;
        height:1050px;
        z-index:1;
    }

【问题讨论】：

'这是一个已知问题吗？' - 不，不是。向我们展示 div 样式的代码 =)
好的，我更新了。 =)
如果你为它创建一个fiddle 可能会更容易。
我可以在 IE 9 或 Chrome 上使用上述 css 解决问题。是否有可能看起来 div 从链接带您的位置上方开始？尝试在 div 上添加边框以查看 div 边缘的确切位置：
我已经尝试过除了上述背景之外的边框，是的，这就是正在发生的事情。 =(

标签： css html href

【解决方案1】：

我在 IE10、IE9、FF 和 Chrome 中尝试了以下代码，但没有 100px 有趣的业务......

    <!DOCTYPE html>
    <html>
    <head>
        <style>
             #homepage_aboutstrip {
               background:url('home/images/gradient-about-background.png');
               background-repeat:repeat-x;
               background-size: auto 100%;
               position:absolute;
               margin-top:200px;
               width:100%;
               height:1050px;
               z-index:1;
               border:1px solid red; /*threw this in to see if the border aligned w/text, and it does*/
               }
        </style>
    </head>


    <body>
    <a style="clear:both;" href="#homepage_aboutstrip">ABOUT STRIP</a>

    <div style="height:500px;">
    The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog 
    </div>

    <div id="homepage_aboutstrip">
    II - The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog The quick brown fox jumped over the lazy dog 
    </div>
    </body>
    </html>

我的代码和你的唯一不同的变量是我的代码中没有渐变-about-background.png。 .png 可能存在大小问题，而 css 中没有考虑到这一问题。

【讨论】：

好吧，似乎发生了一些奇怪的事情。谢谢，伙计！