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 ona
element obsolete. consider puttingid
attribute on nearest container instead.
Comments
Post a Comment