IE6でマージンが2倍になるバグの対策は
Category HTML+CSS
Date 2009年09月17日
皆様コーディングしていますか?
日々ブラウザのバグ達と戦っていますか?
特にIE6とかIE6とかIE6とか・・・
IE6で「キーッ」となるバグの一つである、floatしたボックスのmarginが倍になるバグ。
大体はpaddingで代用が出来るのですが、どうしてもmarginが使いたい時があったりします。
ボックスに背景が指定してあったり、よくわからない隙間が出来てしまった為にネガティブマージンを使いたい時とか。
私は後者で、paddingも0、marginも0、heightも正しく指定しているのになぜか下に3pxほどの隙間が出来てしまっていたのです。
(IE6でフロートされたボックスにmargin-bottomが効かないっていう記事もどこかでみかけたけれど、それじゃないような。。)
IE6だけのバグで原因もよくわからず、とりあえずネガティブマージンで詰めようにも、値が倍になってしまってボックスが若干重なってしまったり。。。
そんな時、コリスさんの記事で紹介されていたIE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet – コリスが凄く助かりました。
この中で海外の記事が紹介されているのですが、リストアップの中に
「IE6のフロートのダブルマージンの対応方法」
があり、目からウロコでした。
まさか
display: inline;これでけでいけるとは、、、凄く簡単ですっ。
私もこれとCSSハックを組み合わせて、IE6対策が無事できました。
ul { float: left; padding: 0; margin: 0; _margin-bottom: -3px; _display: inline; width: 120px; height: 73px; }とすることで無事きれいに表示されるようになりましたよ!
CSSハックは出来るだけ使いたくないですが、とはいえそのために工数を無駄にかけるわけにもいかず、CSSハックで対応しました。
- 脱出ゲームを作成しました
- Studio Yuksのサイト制作のお手伝いをさせていただきました
- よみがな.netを公開しました
- Slug or PostIDプラグインがバージョン1.0になりました。
- お問い合わせフォームへの連投を防ぐ方法+α
- phpMyAdminのsetup.phpに脆弱性があるみたいです
- 1つのデータベースに複数のWordPressをインストールする方法
- 仕事とプライベートで使っているマウスをご紹介
- WordPressでiFrameが消えないようにする記述が必要なくなったようです
- CSS3で横並びのメニューを簡単に作る方法
- FFFTPでファイルをダウンロードしたのに、ファイルがその場所になかった時
- JavaScriptでブラウザのテキスト選択を解除する
- PHPでurlの日本語パラメータをGETで受け取ると文字化けする場合
- お問い合わせフォームへの連投を防ぐ方法+α
- Windows7にIllustratorCS2入れたけど日本語入力ができなかった
- EC-CUBE2.11.0とMySQLの組み合わせで文字化けする時の解決方法
- PHPのSmartyでゼロパディングする
- 投稿記事のURLにスラッグかPostIDを使うプラグイン
- SSL + fancybox + iframe + IE6でセキュリティ警告が出てしまう
- WordPressでiFrameが消える時の解決方法
- HTML+CSS (8)
- JavaScript (12)
- PHP (21)
- PostgreSQL (4)
- WordPress (8)
- WordPressプラグイン (1)
- Movable Type (13)
- Photoshop (2)
- Illustrator (2)
- Firefox (5)
- ツール (2)
- 雑記 (23)
- 未分類 (3)
- Android (1)
コメントを残す