2011-08-17

[CSS] clearfixでページ内リンクをするとレイアウトが上にずれる

とあるページでページ内リンクの処理を入れていたら、
リンク先をクリックすると一部分が上にずれて切れてしまっていました。
URLにハッシュタグがついていない状態では問題なかったので、
気持ち悪いなーと思いながらいろいろ調べていると、
どうもclearfixを取ればうまくいくようです。

それで「ページ内リンク clearfix」で検索すると見事にヒットしました。
STUDIO BLOOM
「URLにハッシュを指定してページ内リンクしたときにレイアウトが崩れる件について」


最終的な原因としては、「アンカーを配置している要素の親要素に
”overflow:hidden”が指定されているとその親要素が上にずれる」とのことのようです。

できるだけclearfixに頼りすぎない方がいいですね!

Comment:

Trackback URL: