IE7 beta 2 のCSSとか

今秋に登場予定のブラウザ「IE7」では、IE6のボックスが広がるバグは改善される雰囲気かしら？

下の画像は折り返されない半角文字列（緑の点線枠）に対してoverflow:hiddenを指定しているファイル、IE7 beta 2での表示です。

現行IEのIE6のボックス（赤枠）が広がるバグは修正された模様。おーっ！と思ったのも束の間、overflow:hiddenは相変わらず効いてない。引き続きwidth等を明示しないと駄目な模様。追記：IE7 beta 2の日本語版で確認したら、修正されているようです。

(・∀・)...。
上の例だけなら良いけど、こうなるとフロートのバグとかも色々と引継ぎそうな予感(;´Д｀)。CSSに関する開発は終了しているという噂も目にしたが、実際どうなんでしょうか？。xml宣言付きだとIE6は互換モードなので、標準準拠モードになるIE7に、バグを引継ぎがれても困るんですよね..(仮に正式版も改善されないものとして話を進めます)。

で、このブログの左カラムの背景色（グレー寄りの白い部分）がIE7では表示されない。目の錯覚ではない様子(-"-;)追記：IE7 beta 2の日本語版で確認したら、修正されているようです。

左カラムは基本的に幅指定無し。左右にマージンを指定してあるだけで、ディスプレイの幅に依存するタイプです。それだけだと現行のIE6でも変になるので、アンダースコアハックを使って#cont{_width:100%;}を読ませて対応させてます。

その現行IEのCSSハックは、IE7では無効になりますよね。xml宣言有りの場合、IE7では標準準拠モードとなるので、現行のCSSハックは無効じゃないと逆に困るんだけども、バグが改善されていないので問題がややこしくなった気が..。

幅を明示すれば直るんですが、カラムはbody直下に置いているので現行のIE以外は幅を明示出来ないのですよ。100%とすればディスプレイ一杯に広がってしまいます。

自分のこのブログの場合は、サイドメニュー・メインカラムとも幅固定や幅指定単位をパーセントに変更するとか、もしくは新たにdivを加えて幅とマージンを別個に指定するようにすれば解決出来ますが、IE7だけの為にそれらを実行するのは嫌なのです(^^;)

という訳で、みりばーる氏の記事を参考に応急処置をしました。

つまり、親要素（コンテナの親）のheightがauto（初期値）の場合、その子（コンテナ）でheight: n%とやっても、（まともなブラウザなら）その算出値はautoになるので弊害はない。

WinIEの崩れをheight: n%で直す

なるほどです。そういう仕様を知りませんでした。子供セレクタを用いて、標準準拠モードになるブラウザ用にheight: n%を読ませる事で解決しました。

と、本来はこれで全く問題無いのですが、Google等のキャッシュでは互換モードになる事に気付きました。つまりGoogle等のキャッシュではautoにならず、本当にheight: n%になってしまいました（Firefox）。まぁ自サイトじゃなくて検索エンジンのキャッシュなので、気にしなければ良いという程度の問題ですが、自分が検索結果をキャッシュで見るタイプなので若干気になるわけですよ（変？）。

で、IE 7 用の CSS ハックを参考に、IE以外にheight:autoを実際に上書きさせる事で、Googleキャッシュに対処しました。

/* MacIE避け→ \*/
body>#cont{height:1%;}/* IE7 */
*:lang(ja) #cont{height:auto; !important;}/* 標準 */
#cont:empty{height:auto; !important;}/* safari */
#cont{_width:100%;}/* IE6 */

(・∀・)...。
現状は上記の様な感じですが、IE7のGoogleキャッシュだけは駄目ですよね。IE7のGoogleキャッシュも解決しようとするのであれば、上記の1%の所を1000%とかにしちゃうとか(苦しい..)。それなら異常に長いページでもない限りキャッシュでも読めますし、通常の閲覧はautoになるので弊害はないです。

しかし現実的にはheightじゃなくてwidthにするしかないかもしれない。正式版がフロートのバグ等も継承されるとすれば、同様な指定が他所にも必要になってくるので。

そうなると、前述の幅固定とか幅指定単位をパーセントにするとか、divを増やすとか...になりそうです、残念ながら..。このブログはどうするか保留ですが、共有テンプレートはそうするかもしれません。まぁ対処はIE7の正式版（日本語版）が登場してからでも十分なんですけどね。登場しなくてもイイけど。

(●´Å｀)つ

2006/03/29 | HTML/CSS | ↓コメント 2 | ↓トラックバック 0