与 :target 的 CSS 行为不一致

Question

我正在尝试使用 CSS 中的 :target 将锚标记正确定位在静态 header 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>

包含图像、link 图像的放大版本和标题。

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

Answer 1

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

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

与 :target 的 CSS 行为不一致

Inconsistant CSS behavior with :target

html

css

cross-browser