お手上げ？ページ内リンク位置ズレの意外な原因

どうやってもページ内リンク（アンカーリンク）のジャンプ先がズレてドはまり。

その意外な原因は、

display:inline-block

でした。

↓問題のコード

<div style="max-width:768px;">
  <a href="#jump">↓ジャンプ↓</a>
  <div style="display:inline-block;">
    <img src="a.jpg" width="1000" height="800" style="max-width:100%;height:auto" loading="lazy"> 
  </div>
...
  <div id="jump">
 ...
  </div>
</div>

このようなことをすると、どうやら<img>の高さが正確に計算ができないらしく、ずいぶん手前に着地してしまいます。

↓修正版

<div style="max-width:768px;">
  <a href="#jump">↓ジャンプ↓</a>
  <div style="display:block;">
    <img src="a.jpg" width="1000" height="800" style="max-width:100%;height:auto" loading="lazy"> 
  </div>
...
  <div id="jump">
 ...
  </div>
</div>

inline-block→blockに変更しただけです。

ジャンプずれの問題で検索すると、ヒットするのはほとんどがloading=lazyやヘッダーのfixedの問題ですが、それらでもなかった場合はぜひ確認してみてください。

ちなみにChrome、Edge、iPhone Safariでも再現してました。