0

この質問は、前の質問のフォローアップです。簡単に言えば、私はおおよそ次のようなウェブサイトを持っています：

<head>
  <style>
    a.anchor {
      position: relative;
      top: -2em;
    }
  </style>
</head>
<body>
  <div style="position:fixed; left:0, top:0; width:100%; height:2em"> ... </div>

  <a name="anchor1" class="anchor">&nbsp</a>
  <h2>Chapter 1</h2>
  ...

  <a name="anchor2" class="anchor">&nbsp</a>
  <h2>Chapter 2</h2>
  ...

</body>

などで個々の見出しをターゲットにすることができindex.html#anchor1ます。アンカーは相対的に配置されます。これ-2emは上部のサイズであり<div>、見出しがすぐ下に適切に配置されるためです。これはすべてうまくいきます。

ただし、Web サイトのフォント サイズを変更すると、コンテンツ全体が (もちろん) 移動し、上部のすぐ下に適切に配置されていた見出しが<div>移動します。これはフィドルですが、問題をうまく再現していないようです。

質問: フォントサイズを変更しながら見出しを揃える方法はありますか? 私が考えることができる唯一のことは、アンカー付きの URL を使用した Javascript のリロードです。おそらくもっとエレガントなものですか？

4

0 に答える 0