WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

ディレクターの伊藤です。今朝、通勤途中にカブト虫を拾いました。夏ですねぇ～

さて、先日半日ほど頭を悩まされた事があり原因が意外なところにあったので紹介いたします。

WordPressにて構築をさせていただきました案件で、ページ内リンクで飛ばすコンテンツがありました。他のページの挙動を確認しても何も問題なかったのですが、ページ内リンクのコンテンツへの導線ボタンをクリックすると飛んだ先のページのフッターの下部に、8px程度の余白が出来ておりましてそれがページ全体に影響を及ぼしヘッダーが8pxブラウザの表示領域から飛び出してしまうという現象が起きました。
これについて、あれやこれやと試してみたものの初めてのケースだった事もあり外部のコーダーさんに相談をしてみました。そこでいただいた解決方法としてフッターのfloatの処理を、clearfixではなくoverflow: hidden で行うといったものでした。

一時 clearfix ばっかり使っていましたが、最近はhtmlに clearfix が溢れかえるのがみっともなかったので overflow: hidden ばかり使っておりましたのでこの施策がどのような影響を及ぼすのか皆目検討もつきませんでしたが…
なんと、隙間もなくなり意図した表示となりました。その後、clearfix について調べてみるとこの記事を見つけました。「clearfixで下マージン(スペース)が発生してしまう - TREND SPOTTING」

こんな事があるのですね！でも、何故他のページでは現象が起きなかったのにページ内リンクのコンテンツに飛ぶと起きるのか…疑問は残りますが、一つ解決できた事は良かったです。