html - Anchors without content buggy in Chrome? -


i stumble (again) on browser-specific issue, may have appeard after recent chrome updates (or maybe existed before).

in cases, using absolutely positioned divs anchors inside not work if have no content (except whitespaces).

the simplest jsfiddle: https://jsfiddle.net/odoppfba/5/

html:

<div>   <a href="#a1">a1 - should jump blue jumps grey</a>   <br/>   <a href="#a2">a2 - jumps page bottom instead of grey</a>   <br>also, if remove div wrapping these 2 links+text (not "anchor-wrapper" div), behavior broken further. removing comment in css resolves issue, putting text anchors. </div>  <div class="anchor-wrapper" style="top:400px; background-color:blue;">   <a id="a1" name="a1"></a> </div>  <div class="anchor-wrapper" style="top:800px; background-color:gray;">   <a id="a2" name="a2"></a> </div> 

css: body { height:2000px; }

.anchor-wrapper {   position:absolute;    width:32px;    height:16px; }  .anchor-wrapper a:before {   /*content:"";*/ /* enabling fixes behavior, putting content anchors or wrappers */ } 

it works fine in browsers tested except chrome.

if content set - empty content "" onto :before - works should in chrome.

i remember reading empty anchors malfunctioning in certains browsers (safari, opera) long ago, chrome? now? missing important?

best regards d

in html5 element has no name attribute. if change div element work.

the name attribute on a element obsolete. consider putting id attribute on nearest container instead.

-- https://www.w3.org/tr/html-markup/a.html


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -