2010年08月31日
今、作成中のサイトでthickboxを使っている。
jQueryは1.4.2
thickboxは3.1
一応、最新のものである
試作サイトで各ブラウザで確認したところ、IE6以外は問題なく表示される。
しかし、IE6だけはBOXは問題なく表示されるが、基のページのレイアウトが崩れる。
なぜだろう...
全体が太ってしまうのである。
「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のソースをみる
$("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
解決である。
しかし、CSSで左右に帯を置きたい場合、ついbodyタグに設定してしまう。
今後はこのことは気を付けるべきであると思った。
思ったついでに、あすまるのホームページをIE6でみる...orz
気を付けていたつもりが、いきなり崩れている。
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)