与以下内容不一致的CSS行为：目标

我试图在CSS中使用:target正确定位静态标头in this webpage下的锚标记。与以下内容不一致的CSS行为：目标

在该页面中，每个图像具有类似于此块：

.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，但我不想写一个广泛的jquery解决方案，如果css会做到这一点，所以我希望有人能够告诉我，如果我要么格式化的东西很差或如果还有别的东西我根本没有考虑。

来源

2016-11-25 medievalmatt

你的锚的id属性在哪里？ –

你的意思是链接？它们在.pdf文件中 - 这些是.pdf中黑白图像的颜色版本的链接。它们采用以下格式： http://www.minorworksoflydgate.net/Articles/JMRC_43_1.html#fig2 其中每个数字都从2-7开始编号。 – medievalmatt

如果您的uri中没有片段标识符，则该选择器将不起作用。从你在这里提供的代码，似乎没有任何东西指向你的锚，它甚至没有'id'属性。你认为'：target'伪类有什么作用？ – Ricky

对于CSS来说需要发生什么，因为我上面在Chrome或Safari中使用它的原因是锚标记必须显示为块或内联块。如果它显示为默认内联，Firefox将处理它。制作负余量将解决任何填充问题。

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

来源

2016-11-26 12:44:01 medievalmatt

这是正确的答案。 Chrome倾向于与其他浏览器不同地处理元素。另见http://stackoverflow.com/questions/23642290/ie-offsetting-and-ignoring-height-width-of-anchor-focus-outlines – BoltClock

与以下内容不一致的CSS行为：目标

回答

相关问题