Question

我（特别是）在针对特定浏览器的问题上发现了这一问题，该问题可能会在最近的Chrome更新（或之前可能存在）之后出现。

在某些情况下，如果没有内容（除了空格），使用带有锚点的绝对定位div不起作用。

最简单的JSFiddle：https://jsfiddle.net/odoppfba/5/

HTML：

<div>
  <a href="#a1">a1 - should jump to BLUE but jumps to GREY</a>
  <br/>
  <a href="#a2">a2 - jumps to the page bottom instead of GREY</a>
  <br>Also, if you remove the DIV wrapping these 2 links+text (not the "anchor-wrapper" div), the behavior is broken even further. Removing the comment in CSS resolves the issue, as well as putting any text into 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：身体{身高：2000px; }

.anchor-wrapper {
  position:absolute; 
  width:32px; 
  height:16px;
}

.anchor-wrapper a:before {
  /*content:"";*/ /* enabling this fixes the behavior, as well as putting any content into anchors or their wrappers */
}

它在我测试的所有浏览器中都能正常运行 Chrome除了。

如果设置了任何内容 - 甚至是空的内容＆＃34;＆＃34;在：之前 - 它在Chrome中可以正常工作。

我记得很久以前在某些浏览器（Safari，Opera）中读过关于空锚的故障，但Chrome？现在？我错过了一些重要的事情吗？

祝你好运 d

Answer 1

在HTML5中，a元素没有name属性。如果将其更改为div元素，它将起作用。

name元素上的a属性已过时。请考虑在最近的容器上添加id属性。

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

在Chrome中没有内容错误的主播？

1 个答案: