CE CreativeSection

こんばんそ。☆サンゴーやいびん。


現在、外注ではない案件をペソペソ構築してて
ぶち当たった壁の高さを忘れないための備忘録。


css3から正式に使えるプロパティの1つに、
「box-sizing」というものがあります。
このプロパティの効果としては、boxのレンダリング方法を
切り替える効果があります。
何か語弊を招きそうな書き方ですが。

box-sizingには2つの値があり、
1つは「content-box」。
もう1つは「border-box」。

値をcontent-boxにしたboxは、
width＋padding＋borderWidth、
ダミーの数値で表すと
300px＋10px（左右で20px）＋5px（左右で10px）＝330px
というサイズになるのに対し、border-boxの方は
width＝padding＋borderWidth＋残り
300px＝10px（左右で20px）＋5px（左右で10px）＋270px
っていう、width（若しくはheight）にpaddingやborderWidthを含めないか含めるかを
指定できるプロパティなんです。
図で説明した方が分かり良いと思うんですけど、めんどくさい割愛しまうす。

現在、このプロパティに正式に対応しているのがOperaのみで(多分)、
後はプレベンダーフィックスで対応させている状態みたいです。
なんとIE8からも対応しているという。

で、このbox-sizingが使えたらナニが便利なのってことですが、
リキッドレイアウト物を作る時に凄い重宝するんです。

ブラウザ幅に合わせてboxの幅なども変えるため、幅の指定は％でやることになります。
その時に、やれpaddingだborderWidthだのを含めないで幅計算～とかってなると、
すんげぇ手間ですし面倒ですし、最悪上手く作れない。
そんな時に、box-sizing:border-boxを指定してやれば、いちいち
paddingやらborderWidthを気にしないで済むということです。
それらをひっくるめてのbox幅（％）でウマーです。


前置きが長くなりましたが。


IE8でこのbox-sizingを使っててハマった箇所があったので備忘Rock。


最近はjQueryを使用してまして、そのAPI？の中に「scrollTop」というのがあります。
座標を調べたり、指定した座標へ移動させたりなどに使用するのですが。

どうやら、このscrollTopとbox-sizing、相性が悪いのかなんなのか、
一緒に使うとscrollTopが機能しません。


先ずcssで「div,li { box-sizing:border-box ～ }」と書いて作業を進めました。
これで、divとliは何もせずともborder-boxでレンダリングしてくれます。
次に、body～/bodyの間に、ページ全体を包むようにdiv#containerをマークします。
そしてその中にdiv#headerやらdiv#wrapperなどを書き込みます。

この状態でブラウザチェックをすると、ChromeやFFではちゃんとborder-boxで
レンダリングされています。
もちろんIE8も。
ここまでは問題ありません。

次に、ページをスクロールしていくとウィンドウの右下に「ページトップへ」という
ボタンを表示するスクリプトを記述し、その中でscrollTopを使いました。

ブラウザチェック→ChromeやFFでは問題なし、ちゃんと出てきます。
しかしIE8だと、まったく出てきてくれません。

このスクリプトの内容が、何pxスクロールされたらボタンを表示という物で、
その何pxまでスクロールされなかったら表示しない（fadeOut、つまり見えなくする）という
書き方をしていました。

おっかしいな、なんでIE8だけ出ない？と思って、スクロールされなかったら処理の方に
alertを書いて、再度ブラウザチェック。
すると、alertが出てきた！what!?

つまり、スクロールされたら～という処理自体はちゃんと機能しているが、
「何pxスクロールされたらボタンを表示」っていう処理のところは
見事にスルーされちゃってるっていう現象でした。
その「何px」を判定させる為に使っていたのが、「scrollTop」。

IE6,7に比べたら遙かに優秀な８で、何故このような事が…
と思っていろいろググってもみたのですが、具体的な解決策は見つからず…
いろいろ人にも聞いてみて、再度cssや記述したコードを見直してみて、
前回上手くいっていたソースと見比べてみて…

その時に、「そういえば前回はbox-sizing使ってないな」と気付き、
ダメ元でbox-sizingを外してみたら…

IE8も出来たーよーorz

原因は分かった。
でもさ、今回はリキッドレイアウトなわけで、やっぱりborder-boxは使いたい。
でもIE8ではそれ外さないと上手くいかない。

またまたcssを見直してみて、ふと気付いたのが
「div,li」に指定したbox-sizing。

div#contaienrもdivだよな。
しかも全体を包んでいる。

…これ？

みたいな感じで、border-boxが必要な要素にだけ指定するようにしてみた。

再度、IE8でチェック。


border-box効きつつscrollTopもきたーよーorz


つまり原因は、ページ全体を包んでいるdivにもborder-boxがかかっていたこと。
このせいで、scrollTopが上手く機能しなかった。


…ヤバイ、どうやってまとめよう。


まとめ！

・IE8でborder-boxを指定するなら、必要な要素だけにかける。
・border-boxが指定されている要素にscrollTopを使わない。
↑語弊がありそうですけど…
・IE8以下が無くならない限り、コーダーは楽できない。



です。

備忘録備忘録。