なんか全然まとまってませんけど、（主にIEの）CSSバグ封じ策としての【width指定】について書いてみました。文章下手でわかりにくいかもしれません。ま、自分用覚書ということで、ありからず。。
↑このページで最も問題なのはIEでpre要素の[overflow:scroll]が無視されちゃうことです。（他の異常点は調整すれば治ります。）
IE6にはdiv要素の入れ子状態・class属性の指定などの条件が重なった時、つまりは特定の環境においてですが、「width」を指定しないとおかしな表示となるバグがあります。というか、「width」を指定すると治る（正常な表示となる）バグがある、と言ったほうがいいのかな。
- blockquote,pre などのブロック要素のbackground-color がページをスクロールすると付いたり消えたり
- pre 要素の「overflow:scroll」（または[overflow:auto」）の指定が無視される。
- border が表示されない
などなど。
IE7（現在はベータ2）の標準モードでは、いくらかバグは修正されているようです。またIE6でも標準モードだと正常な表示となることが多いようです。でも特定の条件でバグは発生してしまいます。よって、標準モードであっても、IE6だけのために「width指定」などの回避策が必要となってくる場合があるということです。
※あっと、もちろん「width指定」が唯一の回避策というわけではないです。親要素の属性を見直したり、バグが発生する特定の属性を使わないようにしたりとかでもいいわけですけど。
「なら、width を指定したらええだけやん」な話のように思われますけど、これがね〜、私もよく理解できてないのですが（汗）、この幅の計算が親要素（ひとつ上のbox）との相対的なものになってくれないのですね。というか、ブロック要素って本来はmarginのみ指定するだけでいいはずなのではと。
【追記】widthの計算方法と回避【?】策
※IE6,IE7の場合です。
標準モード（文書型宣言でシステム識別子あり）といわゆる後方互換モード（システム識別子なし）ではちょっと違うのが痛いところ。
- 標準モード
-
Opera,Firefoxなどとほぼ同様。
.hogehoge { margin: 0 5%; padding: 0 3%; }それぞれ左右の数値を引いて、
width:84%となります。 - 後方互換モード
-
標準モードとは違います。Firefoxなどとも違います。よって、普通に指定してしまうとFirefoxなどで表示がおかしくなります。（Win版Opera9もIEと同様みたいです。）
.hogehoge { margin: 0 5%; padding: 0 3%; }margin , padding は無視で、
width:100%いわゆるCSSハックには詳しくない（というかCSSもまだまだ初心者だお）なのでてきとうですが、IE6,IE7共通なら「アンダースコアハック」や、別々なら「コンディショナルコメント」使うとかかなぁ。Firefox,Operaは width を指定しなくても問題ないと思います。というか、計算方法が違うので指定してはだめなもようです。
標準モードにして、border や background-color などなるべく使わないとかした方が安全だと思いますけど...
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="conditional_ie7.css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="conditional_ie6.css" /> <![endif]--> </head>
まぁ、それでも標準モードであるなら、ほぼどのブラウザでも（すみません3大ブラウザ＝IE,Opera,Firefox しか確認してませんけど）同じ幅になるので、各ブラウザで確認しつつ設定すればいいんですけど、いわゆる互換モードだとブラウザによって差異ができてしまうのですよ。
例えば、互換モードで width:100% を指定すると、IE、Operaでは親要素に対したbox内で margin も計算したきっちり表示となりますが、Firefoxでははみ出してしまったりします。90%を指定してFirefoxでちょうどよくなったと思ったら、IE,Operaでは狭くなっちゃったり。width:auto を指定するとFirefox,OperaではきっちりOKですが、IEクンは無視してくれるらしくバグが出てしまいます。
あっと、あくまで私が知ってる一例ですからね。どんな条件でも症状が同じってわけではないのです。
今後、HTML（CSS）作成の 際に考慮すべきことはこんなとこでしょうか。
- IE7の標準モードではバグが解消されてるかも
- IE7の互換モードではIE6と同じバグが出るかも
- IE6ではアンダースコアハック（_width とか）は有効
- IE7の標準モードではアンダースコアハックが効かない
- 標準モードでのwidth指定は各ブラウザでほぼ同じ
- 互換モードでのwidth指定はFirefoxなどで表示が違うかも
親要素から継承される属性を見直したり、属性の指定を少なくする、あるいは、バグが発生する要素の前後に適当なブロック要素を置くと正常になることもあります。
回避策が【width指定】しかない場合（IE向け）は・・・
- できれば「標準モード」に設定。各ブラウザで確認しつつwidthを指定。あるいは、IE6のみ対策としてならアンダースコアハック（_width とか）を使った指定
- IE7ではアンダースコアハックは効かないので通常のwidth指定が必須となる。各ブラウザ（特にFirefoxなど）での差異に注意する
なんか中途半端な内容ですみませんけど、IE7でCSSへの対応が改善されてることは喜ぶべきなんですが、そのおかげで今後はIE6とIE7の両方での確認及び対処策が必要となって来るという、なんか皮肉な展開になってるわけですね。※ちなみにここの日記もIE7で[overflow:auto」無視のバグが発生してるページがあるのですが、放置してます。そのうち直します。すんません。
