昼よりも夜のほうがもりあがる。

IE系のブラウザとmozilla系のブラウザでスタイルシートの解釈の仕方がちがうからこまったなーって昨日書いたんですが、ついにわかりましたよなにがちがうのか。
主に違うのは、widthの解釈のアレなんです。そもそもwidthっていうのは実際にテキストを入力できるような、paddingとborderの長さの分を抜いた長さのことなんです、ね。いや、よくわかんないですよね。ようするにですね、ここに四角形の下の部分があったら、
│■■■■■■■■│
└────────┘
＿↑〜〜〜〜〜〜↑
この矢印から矢印までの長さが本来のwidthなんです。│と│の長さはカウントされませんし、一番左の「■」と│と、一番右の「■」と│との隙間もカウントされないんですよ。しかしですね、IEではwidthをこう捉えているんです。
│■■■■■■■■│
└────────┘
↑〜〜〜〜〜〜〜〜↑
このように、全体としての長さがwidthとなるんです。｜と｜の長さもカウントしてるし、「■」との隙間もカウントされてますよね。
なんでそうしたのかは知りませんけど、とにかくIEはそこんとこおかしいんです。といっても、ウェブページを作ったことがある人ならわかると思うんですが、前者の「正しいwidth」で考えると、めんどうな計算とかすることになっちゃうんです。
たとえば500pxの枠を作りたいとき。IE的な考え方では、まずwidthを500pxと指定して、線を太くしたければborderの値を大きくして、文字と枠が近すぎると感じたらpaddingで間を設ければ最高。そうやって一切の計算をすることもなく500pxの枠を作ることができます。
しかし「正しいwidth」的に考えると、上の方法ではうまくいきません。なぜなら、線を太くしたり隙間を設けたりすれば、設けた分だけ横幅が広くなってしまうからです。だから「５００−（線の太さ×２＋隙間の広さ×２）」という計算をして、widthの値を正しく直す必要がでてきます。増えた分は引いてやれ、ってことですね。
まあ簡単な計算なんですが、それを何回もやるのはつらいし、もし間違ったりしたら後々めんどうになりますよね。だからサイトを作る側としては、IE的なwidthの考え方のほうが便利なんですね。

でもやっぱりIEは間違ってるわけで、mozillaのfirefoxで見るとレイアウトが崩れるんですよ。じゃあどうしろというと、なんかそれを解決してしまうものがあるんです。余裕で直っちゃうんですが、それをここに勝手に書くのもあれかなーと思うんで、詳しくは「表示　崩れる　IE」とかで検索してください。スタイルシートの最後の行に加えるだけで直ってしまうという。でも僕は見たことなかったです。そんな属性あったのか、みたいな。あと要素を*にすれば、その属性はすべての要素に適用されるっていうのもしらんかったですわ。いい勉強になったよ。
ちなみにそれやっても微妙にIEとfirefoxで表示違ってたりするんだけど、それはフォントのサイズと行間指定しとけばたいてい直るよ。うん。いやー、ねむいね。