Inconsistant CSS-Verhalten mit: Ziel

Question

Ich versuche :target in CSS zu verwenden, um Anchor-Tags unter dem statischen Header in this webpage korrekt zu positionieren.

Auf dieser Seite, jedes der Bilder hat einen Block ähnlich wie diese:

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

, die das Bild enthält, einen Link zu einer größeren Version des Bildes, und eine Beschriftung .

Das alles funktioniert super in Firefox 48.0.1 auf dem Mac. Wenn ich es jedoch in einem anderen Browser öffne, funktioniert das Styling für .anchor:target nicht. Ich habe Safari 9.1.2 und Chrome 54.0.2840.98 gemixt und jemand hat es in Chrome unter Windows versucht (sie haben mir die Version nicht gegeben) und in allen Fällen scheint es nicht richtig zu funktionieren - das Bild erscheint darunter der statische Header. Mein Gedanke ist, dass entweder :target oder vh nicht unterstützt wird, aber alles, was ich gelesen habe, deutet darauf hin, dass dies sehr ausgereifte CSS-Elemente sind, die mit den Versionen der Browser funktionieren sollten, mit denen ich getestet habe. Während ich jquery auf der Seite für Hypothes.is habe, würde ich lieber keine umfangreiche jquery Lösung schreiben, wenn css den Trick machen würde, also hoffe ich, dass jemand mir sagen kann, ob ich die Dinge schlecht formatiere oder nicht Wenn es etwas anderes gibt, über das ich einfach nicht nachdenke.

Answer 1

Was für die CSS passieren muss, wie ich es oben in Chrome oder Safari habe, ist, dass das Anker-Tag als Block oder Inline-Block angezeigt werden muss. Firefox wird damit umgehen, wenn es als Inline-Standard angezeigt wird. Wenn Sie einen negativen Rand erstellen, wird das Padding-Problem behoben.

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