与 :target 不一致的 CSS 行为

Question

我正在尝试在 CSS 中使用 :target 将锚标记正确定位在静态标题 in this webpage 下方。

在该页面上，每个图像都有一个类似于以下的块：

.anchor:target {
  padding-top: 18vh;
}
.anchor {
  margin-top:2vh;
}

div.figure_image {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

figcaption {
  width: 65%;
  font-weight:bold;
  font-size:1.5vmin;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:3vh;
}

<a class="anchor" name="fig3"></a>
<div class="figure_image">
  <figure>
    <a href="../Images/Articles/JMRC_43_Image03.TIFF">
      <img src="../Images/Articles/JMRC_43_fig03.JPG" />
    </a>
    <figcaption>Figure 3: Close-up of the “Balade at the Reverance of 
      Our Lady” stanza, Clopton chantry chapel, Holy Trinity, 
      Long Melford.
    </figcaption>
  </figure>
</div>  

其中包含图片、图片大图的链接和标题。

这一切都在 Mac 上的 Firefox 48.0.1 中运行良好。但是，当我在另一个浏览器中打开它时，.anchor:target 的样式不起作用。我已经厌倦了 Safari 9.1.2 和 Chrome 54.0.2840.98 并且有人在 Windows 上的 Chrome 中尝试过（他们没有给我版本）并且在所有情况下它似乎都不能正常工作——图像出现在下面静态标题。我的想法是不支持:target 或vh，但我读过的所有内容都表明这些都是非常成熟的css 元素，应该可以与我测试过的浏览器版本一起使用。虽然我在 Hypothes.is 的页面上有 jquery，但如果 css 能解决问题，我宁愿不写一个广泛的 jquery 解决方案，所以我希望有人能告诉我我是不是格式化不好或者如果还有其他我根本不考虑的事情。

Answer 1

我上面的css在Chrome或Safari中工作需要发生的是锚标记必须显示为块或内联块。如果它显示为默认内联，Firefox 将处理它。设置负边距将解决任何填充问题。

.anchor:target {
    padding-top: 18vh;
    display: block;
    margin-top: -18vh;
    }