SEMTechnologyExtraInformationRecommend週間ブックマークカテゴリーなしTutorial200910/28IE6の頻出CSSバグいろいろと、それに対処するハック術この記事の読了時間:約10分9秒ツイートCSSコーディングにおいて最も忌むべきもの、それはIE6。「ホントに仕様書読んで作ったのか?」と疑いたくなるほどのオリジナリティ溢れるCSS解釈は、IE6の絶大なシェアとも相まって、一層容赦ない問題となりました。世には様々なハック術や回避方法が出回るも、それ自体がIE6のバグを利用したモノだったりして、IE立てればOpera立たず、みたいな状況に脳ミソとろけた経験のある方も多いのではないでしょーか。回避するハック術なんかを取り上げてみたいと思います。これでもうIE6なんざ怖くない!?IE6の頻出CSSバグと対処ハック術1.横方向のmarginが倍になっちゃうバグ。引っかかるであろう、この凶悪なバグ。このバグに見舞われてしまう条件はものすごくカンタンで、「floatさせた要素に、floatした方向と同じ方向へmarginを設定する」ってだけ。あるdivをfloat:leftしたとして、そのdivにmargin-left:10pxって指定すると、なぜかIE6では左方向のmarginが20px分になってしまいます。「どうしてこうなった!?」と、某AAを思い浮かべてしまうほどの酷い仕様ですが、これは案外サラっと直せます。横方向のmarginが倍になっちゃうバグの対処法:該当要素に「display:inline」を追記する。「margin」の代わりに「padding」を使用する。IEハックを使ってIE6にだけ「margin」の値を半分に指定する。これらのどの方法でもmarginの挙動は通常通りとなります。状況に合わせてお好きなものをお使い下さい☆ちなみに、IE6にだけ効くIEハックの方法は以前「(恐らく)最も簡単な、対IE用CSSハック術」というエントリーでも書きましたが、こんな感じかと。{margin-left:10px;_margin-left:5px;}marginプロパティの前にアンダーバーを入れると、IE6以外のブラウザはアンダーバー以降の記述を無視するので、結果的にIE6だけ反映されるという具合です。コリス2.min-width、max-widthに対応してない。max-width」ですが、IE6はコチラに対応していません。「ウィンドウの幅に合わせてサイズが可変するdiv」なんかを実現させる際にも便利なこれらのプロパティですが、IE6でもやりようによっては再現できちゃいます。max-widthのIE6対処法:専用JavaScriptライブラリ「minmax.js」を使う。IE独自のプロパティ「expression」を使う。ページにJavaScriptを直書きする。1番目の『専用JavaScriptライブラリ「minmax.js」』ですが、一番カンタンっちゃーカンタンですが、ウワサによるとdiv以外の要素に適応させると挙動がおかしいという情報もあったり。2番目の『IE独自のプロパティ「expression」』ですが、CSSの不調はCSSで対応するという意味では、一番しっくりくる対処法のような気がします。"auto");}「expression」とは、CSS内でJavaScriptが使えるというIE独自仕様なんですが、コレはコレでちょっと問題があって、状況や環境によってですが、ものっくそ重い場合があります。見かけるmin-widthの対処法として下記のようなモノがあります。「同一枠内での!important指定は無視される」というIE6のバグ)。言いましたが、個人的には3番目の「ページにJavaScriptを直書きする」ってゆーのがオススメです。Walker3.ブロック要素にinline-blockが効かない。横並びメニューやパンくずリストなんかには最適最強のプロパティ「inline-block」ですが、これに対してもIE6は実にユニークかつ大胆な仕様を持っていて、ボックス要素に対してのinline-block指定は華麗に無視してくれます。これは逆にIE独自のプロパティ「zoom」を利用するコトで、みごと良い感じの挙動になります。縮小率」を指定するIE独自のプロパティですが、このプロパティを設定すると副産物として、IEのレンダリングバグの元凶「hasLayout」という読み取り専用プロパティの値を、「false」から「true」へと変えてくれます。そもそも画像や文字は本来「見て欲しい大きさ」で表示させてるはずで、わざわざ拡大縮小率とか指定する必要性にも乏しいとのコトで、もはやhasLayout専用プロパティと化してるzoom萌え。参考サイトdisplay:inline-blockがけっこう便利。画面をスクロールすると突然表示されたり、リンクに触ろうとするとフワっと消えたり。いう場合、まずこのピーカブーバグってのを疑ってみてください。このバグはfloatに内包されたコンテンツ、またはfloat要素に接する背景やborderなどが表示されたりされなかったり、っていうもの。peek-a-boo」ってコトで、ピーカブーバグと呼ばれています。良く出現するバグかと思いますが、これもサラっと解決する方法があります。ピーカブーバグの対処法:floatの親要素にline-heightを指定する。floatの親要素にwidthまたはheightを指定する。バグる要素にposition:relativeを指定する。バグる要素にzoom:1を指定する。これまた出てきたzoom:1ですが、今回もコレが一番良さそうな対処法かなと。パソコンQ&ACSSによるIE6のバグ/SEO対策のウェブネットIE6を考慮したコーディングのコツそれではここからオマケとして、ワタクシ的に意識してるコーディング方法というか、IEを念頭に置いたCSSコーディングのコツみたいなものをさらけ出してみようかと思います。大したコトでは無いですが、気にしとくと後々ラクできるので良いですよー。文頭のXML宣言や、DOCTYPE宣言に気をつけるIE6はHTMLソースの一行目にDOCTYPE宣言が記述されていないと、自動的に後方互換モード(IE6より前のバージョンと同じようにCSSを解釈)になってしまいます。「一行目にDOCTYPE宣言」は絶対の条件らしく、例えばXHTMLの正式仕様では1行目にXML宣言を記述するべきなのですが、ソレやっちゃうと後方互換モードになり、バグの素となります。XHTMLの場合でも1行目のXML宣言はせず、DOCTYPE宣言から書き始めるようにして、何が何でも標準準拠モードにするようにします。これは大手企業サイトでも一般的に使われている手法ですね。float周りはキケンがいっぱい。margin2倍バグやピーカブーバグをはじめ、float周りはバグが潜む可能性の高い部分です。borderをボックス内に含むか含まないかとかの細かな部分が、鬼のカラム落ちを引き起こしたりもするので、意識しつつとにかく目視!あとは可能であれば、あまりカッチリとしたレイアウトにしないで、floatしたもの同士の隙間を柔軟に持てるようにしちゃったり。目視!コレ最強!困ったらzoom:1。何かおかしーなーって時は、大概の場合は前述のhasLayoutプロパティが原因だったりします。困ったらまずはその要素にzoom:1を当ててみます。それで直ればそれで良し、もしも直らなかったら、その要素自体がIE6に対応してないとかって可能性から考えていきましょう。7割がた、アナタよりIE6の方が間違ってますからwMSも7とか言う前にやるコトあるだろと問い詰めたい。小一時間以上問い詰めたい。この破天荒な仕様が需要を生んだのも事実。足を向けては寝れないけど、隣で眠ってたら寝ぼけたフリしてエルボー入れたい、みたいな。中級講座】floatを解除するclearfixのビューティフルな実装法CSS基礎文法最速マスターdocomo新機種の『iモードブラウザ2.0』の仕様をまとめてみました。第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。PMいつも参考にさせて頂いています。何か調べるといつもここで解決します。わかりやすく解説していただいて大変助かります。今後も宜しくお願いします。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。