「Internet Explorer 6」対策をしてみた
1年以上前の記事です。内容が古い可能性があります。
ブログデザインリニューアルに伴い、弱者排除の方針で「Internet Explorer 6」対策をしていなかったのですが、いまだに2割も「Internet Explorer 6」を使っている人がいることを知ってできれば何とかしたいと思っていたところ、ツイッターでこんな記事を見かけた。
□IE 6で泣かないための、9つのCSSハック(1/3) – @IT
現場のプロから学ぶXHTML+CSS
著者:益子 貴寛
販売元:毎日コミュニケーションズ
発売日:2008-11-11
おすすめ度:
レビューを見る
実はこの記事には直接の解決法はなかったのだが、これがきっかけで「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でもまともに見えるようになりました。
実はまだちょっとだけ不具合あるんだけどその辺りはそのうちこっそりと。。
でも、一応これでほぼ100%近くのユーザーがまともにこのブログを見れるようになったので良しとします。
それ以前のブラウザはもうしらんです。ごめんなさい。
アドセンス広告メイン
関連記事
-
-
チャットするならSkype(スカイプ)のグループ機能がオススメ
1年以上前の記事です。内容が古い可能性があります。「つぶくま」で毎週金曜に「ツイ …
-
-
デザイナーではありえない。社会人に聞いた好きなフォント1位は「MS ゴシック」
1年以上前の記事です。内容が古い可能性があります。個人的にはFutura好き。 …
-
-
カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 3 – テンプレート編集の巻 【ワードプレス】 #wp
1年以上前の記事です。内容が古い可能性があります。1. Custom Field …
-
-
貴方のWebデザイナー適性度をオンラインで確認してみよう
1年以上前の記事です。内容が古い可能性があります。日々、パソコンの画面とにらめっ …
-
-
Instagram(インスタグラム)でミニチュア風写真が撮れた
1年以上前の記事です。内容が古い可能性があります。一時期流行っていたミニチュア風 …
-
-
Googleストリートビューで福島県の帰宅困難地域の様子が全域見れるようになった
1年以上前の記事です。内容が古い可能性があります。わが町、熊谷でも去年の2月から …
-
-
CSS2.1まとめ書き-font編(HTML・CSSリファレンス)
1年以上前の記事です。内容が古い可能性があります。HTML5やCSS3がそろそろ …
-
-
学校(パソコン教室等)でFC2ホームページにアクセスできなくなった場合の対処法
1年以上前の記事です。内容が古い可能性があります。個人で行っているマンツーマンの …
-
-
GIMP2(ギンプ2)はコピペでレイヤーが作れない
1年以上前の記事です。内容が古い可能性があります。お久しぶりに画像編集ソフトGI …
-
-
プルダウンメニューを全体的にセンタリングさせる方法
1年以上前の記事です。内容が古い可能性があります。InternetExplore …
- PREV
- 様々なポイントと相互交換できる「Gポイント」を始めてみた
- NEXT
- 会社バレしたら実名・顔出しします