以前、floatを使った要素の回り込みを実現する際のおまじないとして、overflow:hiddenを紹介しました。clearfixテクニックを使う方法と比べると手軽で、表示上の不具合に対し応急処置となるケースが多いものですから、私のような横着者はとりあえずどの要素にもoverflow:hiddenを適用しておくよう習慣づいてしまっています。

ただ、この手軽な方法にも落とし穴があります。overflow:hiddenを使った要素内で、URLの末尾に#idという形でパラメータを付与し辿るページ内リンクが行われた場合、当の要素が他の要素の下に潜り込んでしまうといった表示不具合が起こる場合があるのです。この不具合は、overflow:hiddenとページ内リンクの組み合わせで必ず発生する不具合というわけでもないため、長くWEB制作に携わりながら、一度もこうした現象に見舞われたことがない、したがって急にそうした不具合に当たって足下を掬われるといったケースがあり得るかもしれません。

対処法はとりあえず、ページ内リンクをあきらめるかoverflow:hiddenをあきらめるかといった、敗北主義的なものしかありません。幸いfloatの回り込み指定の実現方法はoverflow:hiddenだけではありませんし、ページ内リンクについてはJavaScriptを使ったページ内スクロールに変更して衝突を避けることもできます。ページ内スクロールの実現には、こちらのサイトのsmoothScroll.jsなどが便利です。

この不具合はほとんどのブラウザで共通して発生してくれる優れた不具合なのが幸いですね。仕様的なものなので、あるバージョンから突然修正が入り対処を行った部分の労力が無駄になることもありません。

Tweet