SEO アクセスアップ ウェブのしあわせ

Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ

スタイルシートのハック。

ブラウザごとにスタイルシートの表示が違ったりして、なにかとデザインに苦労をしてました。
ただ、これを使っても苦労することには、変わりはないのですが。ｗ

従来のメジャーブラウザで言えば、IEとFireFoxでなんとかなっていれば、ほとんどのケースで「なんとかなって」いた。

けども、最近は、Vista標準という事もあり、IE7がいい勢いで増加してきている。

同じIEなんだから、IE6と同じように表示してくれりゃいいじゃん。って思うんですが、なんていうかその、WWW標準なんだかなんだか知りませんが、IE6とは、まるで別物。

言うなれば、マジンガーZからグレートマジンガーの流れに関係なく、キューティーハニーに進化し、ハニーに「パイルダーオンできない！」。そんな感じ（どんな？）

というわけで、とりあえず現状では、「IE6」「IE7」「その他のモダンブラウザ（主にFireFox）」の3種類を使い分ければ、なんとかなりそうです。

様々なCSSハックがあるので、いずれまとめてみようと思う。

XHTML + CSSでページをレイアウトしている場合、段落を左右に分割するのにCSSのfloatを使って、左右に寄せたりします。

単純なブログレイアウトみたいな大まかなレイアウトならば、あまり気にしませんが、従来TABLEでレイアウトしていたような、複雑なレイアウトを組もうとするとclear:both;を適当に入れてfloatを解除してあげる必要があります。

例えば、<br style="clear:both" />とか、<div style="clear:both"></div>とかなんてするんですが、BRの方は、まあまあいいかなと思うんですが、空DIVを作る方は、邪道な感じがします。

そこで、空DIVを作ることなく、floatを解除してあげようというのがclearfixというTips。

ようは、 .hogehoge:after { clear:both; } 見たいに　:after　を使って、DIVを閉じたところでfloat解除しましょうって事。
そして、各ブラウザでのレイアウトの違いを吸収してシンプルにコーディングする例が以下。

http://norisfactory.com/stylesheetlab/000038.php

CSS
floatの最後にclear:bothをつける事で、レイアウトのズレを解決するのを
CSSのみで、修正するTips

http://hato-style.chu.jp/note/note_20070614.html

MacIE 5向けの display: inline-table(inline-block) を全ブラウザに対して指定。その後同じセレクタ内で、コメントハックを使用しMacIE以外のブラウザを display: block にするようにした。

WinIE 7対応向けの指定を display: inline-block から min-height へ変更。

スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る −モダンブラウザ編−を参考にcontentプロパティを空にしてみた。よって after疑似要素の height と visibility を削除した。

IE向けのスターハックを削除。

WinIE 5〜6用に指定された height:1px 。他のモダンブラウザで正しい高さを算出させるために子供セレクタを使用して height: auto を上書き。

XHTMLのページデザインで、各ブラウザでの表示の違いをどうするかという事。

W3Cでは、XHTML文書の仕様でDOCTYPE宣言の前にXML宣言をする事を強く推奨されていて、 XMLバージョンの宣言が必須で、キャラクタエンコードは、UTF-8(またはUTF-16)以外の場合は必須であると定義されている。

ところが、IE6.0ではXML宣言がある場合ページの表示が「互換モード」（互換というよりもIE独自な気もしますが。。。） というものになって、表示がおかしくなってしまう。また、 さらに古いブラウザになるとXML宣言自身がページに表示されてしまうという問題もある。

よくあるのがスタイルシートに[ width | height ]と[ padding | border ]した場合にある。

IE6.0（互換モード）の場合
width,height,paddingを同時に指定してもオブジェクトの横幅(縦幅)は、width,heightの指定通りになる。

IE7.0、FireFoｘの場合
オブジェクトの内容の部分に横幅(縦幅)の指定が利き、オブジェクト全体の横幅（縦幅）はwidth+paddingとなる。

そこで、このようなレンダリングの違いによるデザインの補正として「XML宣言しない」とか、「CSSハック」 を使用するといったテクニックが必要になる。

企業サイトなどでは、 ｊｓでUAの違いごとにスタイルシートを振り分けてブラウザごとに最適化されたCSSを読み込ませるといった手法をよく見かける。

また、その他によくある方法としては、DIVにwidth,heightを指定し、その中のPでpaddingを指定するというもの。 width(height)とpaddingが同時に指定されていなければOKというもの。

またIE6以前の古いブラウザなどに関しては、Mid Pass FilterなんかのCSS実装のバグを利用したCSSハックでスタイルシートの指定を分けるといった方法がある。

なんだか、探り出すとまだまだありそうだし、ブラウザの更新で、対応されてしまったり。 いろいろと面倒くさそうですが、まとめてきちんと整理しておこうと思う。

じゃあの。