Question

我有一个html文件，包含以下代码 -

<html>
<head></head>
<body>
<nav id="headnav" class="menu"> <a id="logo" href="index.php"><img src="http://icons.iconarchive.com/icons/benjigarner/softdimension/256/Image-ready-CS-2-icon.png"></a>
        <ul>            
          <li><a data-scroll id="t_link" href="#feature">Feature</a></li>
          <li><a data-scroll id="d_link" href="#thedrink">The Drink</a></li>
          <li><a data-scroll id="o_link" href="#recipes">Recipes</a></li>                           
        </ul>    
    </nav>    
<div id="home" data-stellar-background-ratio="0.5">
                <div id="poloclub_open">
                      <div class="space"></div>
                      <img src="http://cdn1.yourstory.com/wp-content/uploads/2014/04/Image-1.jpg" />
                      <div class="space"></div>
                </div>
                          <div id="paratext1">
                          <blockquote class="ani"><a href="#trailer">PRESENTING POLO CLUB</a></blockquote>
                          </div><!--paratext1--> 
                </div>
        <!--thedrink-->                     
      <section id="feature">
             <div id="trail">
                                      <div id="videocontrol">
                                      <a id="play-pause" class="play"><img src="http://www.veryicon.com/icon/png/System/clearDisk%20iconset%20part%20I/audio%20pause.png"/></a>
                                      </div>
                                    <video id="video_background" preload="auto" volume="5">
                                              <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
                                              <source src="http://video-js.zencoder.com/oceans-clip.webm"/>
                                              <source src="http://video-js.zencoder.com/oceans-clip.ogv"/>    
                                    </video>                               

                                <img id="image_background" src="http://www.gettyimages.com/CMS/StaticContent/1357941082241_new_banner-700x465.jpg" width="100%" height="100%" />                           
                                </div><!--trail-->                      
</section><!--feature-->
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
<a id="abc">abc</a>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
<a id="123">123</a>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
<h4>test</h4>
</br>
</body>
</html>

将上述代码复制并粘贴到记事本中，并将其另存为abc.htm。保存后打开html文件并将片段#abc添加到URL以进行聚焦。

e.g - //path/abc.htm#abc

聚焦后，它不会聚焦到那个确切的位置..事实上，页面在锚定到文本“abc”后向上移动了一点。

为什么会这样？

请帮助..

Answer 1

您有一些没有高度/宽度属性或样式的图像。在加载图像之前，您的浏览器将滚动到锚点。然后，图像会改变您链接的内容的位置。

Chrome中的问题

1 个答案: