IE6 サイドのカラム落ちは修正できたけれど…

IE6でサイドバーがカラム落ちになっていたのを、ハックでなんとか解決できた。
が、画像サムネールの大きさが制御されず、
レイアウトはやはり崩れてしまう。(➾その後home-3のカラム落ちも解決)
XP+IE6をお使いの皆様、XPでもIE8にはできるようですので、
セキュリティーホールその他の問題もあることから、
切にIE8へのバージョンアップをお勧めします!!!


このテーマは、フロントページ(homepage.php)の作りと、single.php や index.php の作りが異なり、homepage.phpだけがサイドカラム落ちとなるため、index.phpを参考にCSS設定を入れ替える。
その際、サイドを他のページと同じサイドウィジェットとして読み込む方法もあるけれど、 独自に表示させられるため、やはりhome-5 とする。

IE6とIE7は別々にハックで制御する必要があった。
その結果・・・

★IE7・・・スライドショーが最近の一枚のみ表示となるも、サイドバー、画像サムネールとも問題なし。
フロントページのウィジェット 二段組みの表示ができない(home-3 が ホーム-2の下に落ちる )➾左右のmarginを調整し、ハックでさらに調整して解決

★IE6・・・スライドショーはIE7と同じで最近の一枚のみの表示。サイドバーは上記修正で問題なし。single.php もセンターに寄らない、が、ハックでmarginを調整。
問題は次の二点。➾一点。

・フロントページのウィジェット 二段組みの表示ができない(home-3 が ホーム-2の下に落ちる 等)

画像サムネールサイズが大きくなる(サイズ指定が効かず)。

[参考サイト]
CSSでfloatを用いたレイアウトの注意点 : CSS

float: leftを指定した要素の左マージンが0の場合(float: rightも同様)

各float要素のボックスモデル※1の横幅の合計値が親要素のwidthプロパティと正確に一致するときはIE6,7・Firefox 3ともにカラム落ちは発生しない※2
追記:IE6ではカラム落ちする事態が発生。overflow:hidden;で解決。

float: leftを指定した要素に左マージンが設定されている場合(float: rightも同様)

上述のようにIE7・Firefox3ともにボックスモデルの横幅の合計値が親要素のwidthプロパティと正確に一致するときはカラム落ちは発生しない。
IE6はフロートする最初の要素の左マージンを2倍の値に解釈する。複数個フローとさせる場合は2個目以上の要素は通常どおりの解釈をする。

対策はIE6のみフロートする最初の要素の左マージンのみ半分にする(IE6に対するCSSハック)。

★IE5・・・もう考慮しなくてもいいだろうとは思うけれど、互換モードにあるのでチェックしてみた。
スライドショーは全ての画像がたてに表示されてしまう。
サイドバー、画像サムネール、二段組み、ともに問題なし。
あと、フッターの中身が横に並ばない。
でも、IE6でダメなサムネールと、IE6と7でダメな二段組みがしっかり表示されてるだけでえらいと思ってしまう。

※そういえばIE11の互換モード、 5、7、8、9、10 とあるのに、なぜか6が抜けている。意味するところは何だろう。マイクロソフトも、IE6はなかったことにしたいとか。

検索でみつけた以下の記事、頷きながら読んだ。

・IE6を永眠させるべき10の理由(4年前の記事ですぜ!)
http://jp.techcrunch.com/2013/10/02/20131001internet-explorer-6-market-share-finally-falls-under-5/

・Internet Explorer 6の市場シェアが5%未満に。但しレガシー問題は続く
http://jp.techcrunch.com/2013/10/02/20131001internet-explorer-6-market-share-finally-falls-under-5/

・何故日本人はそこまでIE6が大好きなのか。
http://www.yukawanet.com/archives/4173259.html

IE6が日本だけに多いというのも驚き。
まさかこんなところでも日本論が出てくるとは…。

しかし、このテーマ、IE6どころか IE7も無視してる。世界はもうそうなってるんだ、もうすぐ日本も追いつくよねきっと、と思うことにして、IE6、IE7の修正作業はこれにて完了。

※今日発見した課題
TOPとタグ付けしたfeatureの記事、二つ以上TOPタグ付けするとなぜかサイドが落ちる。ウィジェットに直接PHPを書き込んであるので、PHPの部分かCSSの部分かいずれかに問題があるのだろう。でも一個だけなら問題なさそうなので、とりあえずは二個以上指定しないようにすること。

  • トップへ戻る
  • カテゴリアーカイブ
  • HOME

コメント

メールアドレスが公開されることはありません。* は必須項目です。


*