1

フラグメント識別子が、ページのコンテンツが始まる実際のポイントにジャンプする方法が好きではありません。ボックスが画面の上部から始まるのは厄介に見えます。それはちょっと私を悩ませます。そのため、その上にname属性を持つアンカーを使用し、display: blockその下のボックスの上部にある10pxのマージンに注意を払うように設定しました。この方法を使用すると、基本的にそのコンテンツにジャンプし、コンテンツの開始とブラウザウィンドウの実際の上端の間に10pxの間隔があります。

<a name="some-text"></a>

しかし、HTML5でこれを行うことは許可されなくなったようです。ページを検証しようとすると、次のような警告が表示されます。

name属性は廃止されました。代わりに、最も近いコンテナにid属性を配置することを検討してください。

名前付きアンカーではなく空のハイパーリンクになるため、すべてのname属性をid属性に変更することはできません（私も試しましたが、display: block適用されなくなりました）。

したがって、次のように、部門のグループが与えられます。

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

そして、それらすべての上部に10pxのマージンが適用されていると仮定して、フラグメントIDを使用して別の場所にジャンプするときに、コンテンツ間に10pxのスペースが含まれるように、IDを再適用する方法はありますか？とブラウザウィンドウの上端？

注： IDを各部門に直接適用しようとしましたが、ブラウザーはジャンプ先を決定するときに要素のマージンを無視します。

4

3 に答える 3

1

最初はうまくいきませんでした。もう一度やり直してください。あなたは言う：

名前付きアンカーではなく空のハイパーリンクになるため、すべてのname属性をid属性に変更することはできません（私も試しましたが、display：ブロックは適用されなくなりました）。

ここで問題がどこにあるのか、なぜそれを使用したいのか、私にはよくわかりませんdisplay: block。私と明らかにW3Cがそれをプレースホルダーと見なしているので、その目的は、属性idの代わりに使用するだけで、HTML4の場合と同じようにアンカーとして機能する必要があります。name

この単純なhtmlをW3Cのマークアップバリデーターで実行すると、有効なhtml5であることがわかります。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a id="test"></a>
</body>
</html>

したがって、次の2つのオプションになります。

a。うまくいきませんでした。申し訳ありませんが、間違いを訂正していただければ幸いです。

b。あなたは簡単に達成できることを達成するためにあなたの邪魔をしていません。

于 2012-11-10T03:14:03.810 に答える
1

パディングを使用すると、この問題を回避できます。マージンはコンテンツの境界に含まれていないため、ブラウザはそれを無視します。

<!doctype html>
<html>

<head>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
div {
  padding-top: 10px;
}

</style>
</head>
<body>

<div id="1">How can I jump to a point slightly above the fragment identifier?<br/>
up vote 2 down vote favorite</div>

<div id="2">
I don't like how the fragment identifier jumps to the actual point of where the content begins on the page. It looks awkward having the box start right at the top of the screen. It kind of bugs me. So I was using an anchor with a name attribute above it, set to display: block so that it would pay attention to the 10px margin on the top of the box below it. Using this method, it essentially jumped down to that content, with 10px spacing between the start of the content and the actual top edge of the browser window.</div>

<div id="3">
But it seems that I'm no longer allowed to do this in HTML5, as when I try to validate the page, I get this nice warning:</div>

<div id="4">
    The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.</div>

<div id="5">
I can't just change all the name attributes to id attributes because it becomes an empty hyperlink rather than a named anchor (I've also tried, the display: block no longer gets applied to it).</div>

<div id="6">
So, given a group of divisions, like so:</div>

<div id="7">Content</div>
<div id="8">Content</div>
<div id="9">Content</div>
<div id="10">Content</div>

<div id="11">
and assuming that they all have a 10px margin applied to the top of them, is there any way to re-apply the IDs to them so that when I use fragment identifiers to jump to different spots, it still includes the 10px space between the content and the top edge of the browser window?</div>

<div id="12">
Note: I've tried applying the ID directly to each division, but the browser ignores the margin on the element when determining where to jump.</div>

<div id="13">
html fragment-identifier</div>

</body>

</html>
于 2012-11-10T03:34:03.900 に答える
0 
.spacer{height:25px;}​

アンカーの直後に必要な高さのクラスを持つ要素を配置します。

フィドルの例。http://jsfiddle.net/calder12/sJEkQ/3/

于 2012-11-10T05:02:26.943 に答える