與以下內容不一致的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行爲：目標

回答

相關問題