Html 镀铬问题_Html_Google Chrome_Url_Anchor

Html 镀铬问题

html google-chrome url

Html 镀铬问题,html,google-chrome,url,anchor,Html,Google Chrome,Url,Anchor,我有一个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"&

我有一个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.htmlabc

聚焦后，它不会聚焦到那个确切的位置。。事实上，页面在锚定到文本abc后会稍微向上移动

为什么会发生这种情况

请提供帮助。

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

您在锚定标记中包含id=abc，因此它将移动到该位置。不同的浏览器处理方式不同。告诉浏览器图像的尺寸。