2010年08月31日

mixiチェック
今、作成中のサイトでthickboxを使っている。
jQueryは1.4.2
thickboxは3.1
一応、最新のものである

試作サイトで各ブラウザで確認したところ、IE6以外は問題なく表示される。
しかし、IE6だけはBOXは問題なく表示されるが、基のページのレイアウトが崩れる。

なぜだろう...

〜 現象と調査 〜
崩れ方を観察すると、全体のwidthが横幅いっぱいに広がる。
全体が太ってしまうのである。

「thickbox IE6 崩れる」でググってみる。
DOCTYPE宣言を変更するとか、IE6用のカスタマイズするとか...
どれもうまくいかない。

そこで原点に帰ってみる。
崩れ方は、「全体のwidthが横幅いっぱいに広がる。」
実は、スタイルシートでbodyタグの横幅とマージンを決めている。

html {
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0;
    vertical-align: baseline;
    background: transparent;
}
body {
    width : 750px;
    margin : 0px auto;
    padding : 0 0;
    border : 1px solid silver;
}

通常の表示上は問題なし
thickboxを表示すると、太る。
ならば body {width:750px  !important;}で優先順位変えてしまえ
と乱暴な事をしたところ
太らなくしてしまえば...orz
太らない、thickboxもきちんと表示...でも背景のマスクが変な感じ
ということで、ここへ来てthickbox.jsのソースをみる

〜 原因判明 〜
なんと、IE6の処理として
  $("body","html").css({height: "100%", width: "100%"});
とある。
つまり、bodyの横幅いっぱいにされてしまっているのが原因。
IE6以外にはこの処理はない。

〜 解決 〜
ググっていた時、次のようなサイトがあった
IEでだけレイアウトが崩れる場合はpaddingを探す - Sakura scope
「paddingによる崩れを解決するために、div#insideを作る」とある。
しかし、paddinngについては気を付けていたのでこれが問題ではないと思っていた。

しかし、原因は明らかにbodyのサイズ指定。
試作サイトのHTMLソース、CSSソースをみると bodyの直下にdivを作っていた。(仮にこのdivのidを"foge"としよう)
しかもスタイル設定全くなし
そこで、bodyのスタイル設定をfogeに移す。

body {
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0;
}
#foge {
    width : 750px;
    margin : 0px auto;
    padding : 0px 0px 0px 0px;
    border : 1px solid silver;
}

さぁ、まずはIE6で確認...OK
FireFoxで確認...OK
Operaで確認...OK
Safariで確認...OK
Chromeで確認...OK

もちろん、IE8でも確認...OK
解決である。

〜 あとがき 〜
まぁ、thickbox.jsのソースを読めば、当たり前の事である。
しかし、CSSで左右に帯を置きたい場合、ついbodyタグに設定してしまう。
今後はこのことは気を付けるべきであると思った。

思ったついでに、あすまるのホームページをIE6でみる...orz
気を付けていたつもりが、いきなり崩れている。
thickbox以前の問題?!
至急対処しなければ!


(11:09)

コメントする

名前
 
  絵文字