新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

「Internet Explorer 6」対策をしてみた

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

ブログデザインリニューアルに伴い、弱者排除の方針で「Internet Explorer 6」対策をしていなかったのですが、いまだに2割も「Internet Explorer 6」を使っている人がいることを知ってできれば何とかしたいと思っていたところ、ツイッターでこんな記事を見かけた。

IE 6で泣かないための、9つのCSSハック(1/3) – @IT

現場のプロから学ぶXHTML+CSS現場のプロから学ぶXHTML+CSS
著者:益子 貴寛
販売元:毎日コミュニケーションズ
発売日:2008-11-11
おすすめ度:4.5
レビューを見る

スポンサーリンク
 

  1. 透過PNGを表示させる方法
  2. min-width、max-widthを使いたい
  3. min-heightを対応させる方法
  4. heightを100%にする方法
  5. フロート時の2倍マージンを通常に戻す方法
  6. リストの縦並びメニュー
  7. リサイズ時にずれる
  8. フロート時にテキストが3pxずれてしまっていた場合
  9. 外側の要素にoverflow:auto;を指定していた場合

実はこの記事には直接の解決法はなかったのだが、これがきっかけで「Internet Explorer 6」対策に踏み切った。

今の段階でヘッダ内のブロック要素にマイナスマージンを使っている部分が怪しいと思われたのでそのあたりを探ってみると以下の記事を発見。

ネガティブマージンをIE6.0でも使う: ポルカの日記 | CSSベースのHTMLレイアウト入門講座

【まとめ】
ネガティブマージンを使えば、横幅を固定したレイアウト領域をはみだしてコンテンツ(画像など)を表示させることができる。ただし、IE6.0では「position: relative;」の併記が必要。

マイナスマージンのことをネガティブマージンって言うんですね。初めて聞きました。
ざっとしか読んでないので的外れだったかもしれないが、まずはこの記事にヒントを得てマイナスマージン(ネガティブマージン)の入っているブロック要素に「position: relative;」をつけてみた。
しかし変わらず。

IE6でネガティブマージンを指定した画像 – @inつくば – つくばで働くデザイナーが日々徒然、気の向く侭に綴るブログ。

ネガティブマージンを指定すると、IE6では枠からはみ出した部分が表示されません。
が、「position: relative;」を指定すると、きちんとはみ出した部分が表示されます。

とのことを後で知り、やっぱり的外れだったことに気づく。

他にも
IE6でよく遭遇するCSSのバグとその解決方法 | コリス

マージンが2倍になってしまうバグは、「display:inline;」で解決します。

なんてのも試してみるがダメ。
このあたりはfloatした要素に対するバグだったようです。

で、最終的に選んだのは無敵のこちら。

CSSハック – ブラウザによって適用させるCSSを振り分け – 10press

対象 書き方
IE6のみ適用 * html element { }
IE7のみ適用 *:first-child + html element { }
IE6を除外(モダンブラウザ) html > body element { }
IE6、IE7を除外(モダンブラウザ) html>/**/body element { }
Operaに適用 * + html:first-child body { }
Safariに適用 /**/ html:6irst-child { } /* end */
Mac IE適用 /**//*/ selector { property: value; }/**/
IE 5~IE 7に適用 selector { *property: value; }
IE 5~IE 6に適用 selector { _property: value; }

CSSの各要素の先頭に「* html」と入れることでIE6だけに反映されるCSSを作ることができるそうです。
これを使って調整。あわせて「position: relative;」や「display:inline;」も使いなんとかIE6でもまともに見えるようになりました。

【修正前】
これはマズい

【修正後】
IE6対応

実はまだちょっとだけ不具合あるんだけどその辺りはそのうちこっそりと。。
でも、一応これでほぼ100%近くのユーザーがまともにこのブログを見れるようになったので良しとします。
それ以前のブラウザはもうしらんです。ごめんなさい。

 - デザイン, ユーザビリティ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

アマゾンアフィリエイトリンクツール4つ

1年以上前の記事です。内容が古い可能性があります。お気づきの方もいらっしゃると思 …

no image
mixi(ミクシィ)とFacebook(フェイスブック)を連携させる方法

1年以上前の記事です。内容が古い可能性があります。Facebookと連携シリーズ …

ワードプレス(WordPress)とツイッターを連携「Twitter Tools」 #wp

1年以上前の記事です。内容が古い可能性があります。さて、つぶくまにワードプレスを …

no image
SVGって知ってますか?

1年以上前の記事です。内容が古い可能性があります。SVG(Scalable Ve …

長く使って遅くなってきたFirefoxを速くする方法 (5/11追記)

1年以上前の記事です。内容が古い可能性があります。ちょっと前からメインのブラウザ …

ノート経由のブログ連携終了につき「RSS Graffiti」にてブログ連携【Facebook】

1年以上前の記事です。内容が古い可能性があります。今までブログをFacebook …

世の中進んでる。スマホ(スマートフォン)で操作するシャワートイレとそれをハッキングする人たち

1年以上前の記事です。内容が古い可能性があります。実際、そういう人たちが現れたわ …

携帯サイト(ケータイサイト)の作り方Part2

1年以上前の記事です。内容が古い可能性があります。携帯サイト作成に関するすばらし …

gif(ジフ・ギフ)画像書き出しで使う「ディザ」とは何なのか

1年以上前の記事です。内容が古い可能性があります。Webデザインにおいてgif( …

no image
撮影

1年以上前の記事です。内容が古い可能性があります。打ち合わせを兼ねて撮影に行って …

血液型オヤジ