Question

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

在该页面上，每个图像都有一个与此类似的块：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

包含图片，指向较大版本图片的链接以及标题。

这一切在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解决方案，所以我希望有人可以告诉我，如果我＆＃39;要么把事情格式化得不好，要么是否还有其他事情，我根本就不考虑。

Answer 1

如上所述，在Chrome或Safari中使用css需要做的是锚标记必须显示为块或内联块。如果它显示为默认内联，Firefox将处理它。产生负余量将解决任何填充问题。

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

Inconsistant CSS行为：target

1 个答案: