12月14日
URLにハッシュを指定してページ内リンクしたときにレイアウトが崩れる件について
URLの末尾に
fuga.html#hoge
とかして、ページ内のアンカー位置に表示を移動させたいときってありますよね。
-
<a href="#hoge">ほげ</a>
とかしても同じ動きですけど。
そうすると、なぜかボックスが上にずれてしまう、という現象がありましたので、その解決法を一日うんうん言いながら探してました。
ググっても全然出てこないしさ…orz
症状としては、ハッシュでの移動を行った場合、正常であれば
のようになっている箇所が、
こんな感じで上にずれてしまうんですな。
（ちょっと分かりにくいけど、メニューの上が切れてるでしょ？）
問題はハッシュでの移動で起きてるので、アンカー用意してページ内でのみ遷移させるということであれば、noriさんのslideScroll.jsとか使っちゃえば、スクリプト読み込むだけでページ内リンクをJSが乗っ取ってくれてハッシュでの移動にならないんだけど、別ページからハッシュを指定する場合、JSではどうしても乗り越えられない壁があって対応できないのデス。
やはり問題の特定を行わなければ…orz
で、デバッグモード全開で見つけたのが、
アンカーを配置している要素の親要素に”overflow:hidden”が指定されているとその親要素が上にずれる
でした。
overflow:hiddenと言えば…
-
.clearfix:after{
-
content:".";
-
display:block;
-
height:0;
-
visibility:hidden;
-
}
-
.clearfix{
-
overflow:hidden;
-
}
-
/* Hides from IE-mac \*/
-
* html .clearfix{
-
height:1%;
-
overflow:visible;
-
}
-
/* End hide from IE-mac */
定番のclearfixにバッチリ使われておりますやん。。。
clearfix大好き人間（ちゃんと使うべき所で使ってますよ）の自分は、きっちりコンテンツ用ボックスにclearfixを仕込んでたようで。。。
親要素にバッチリ原因が潜んでいた、という。。。orz
一応、全てのブラウザで起きてしまうので、この現象にハマってしまった人は、アンカーの親にoverflow:hiddenが居ないか、調べてみて下さいね。
ワタクシは今まで経験したコトのないバグです～
また行き詰った時に思い出させてもらいますね～
掲載日： 2009年12月14日 10:50 PM by さいとー
> さいとーさん
まー自分がかなりのclearfix依存症なのでｗｗｗ
いつかお役に立てれば幸いです。
掲載日： 2009年12月16日 12:14 AM by 板
数日前に原因がわからず断念して、bugfixを始めたので再度トライ。
やっとこちらに辿り着けました・・
見事に、同じ症状で・・無事解決いたしました。
有益な情報有難うございました。
今日は、これで眠れます（笑）
掲載日： 2010年02月10日 1:40 AM by win
> winさん
PHPやjsでもデバグを得意としてるので（orz）何とか原因を特定できた件でしたｗ
お役に立ててなによりです(^-^
掲載日： 2010年02月10日 9:28 AM by 板