IE に泣く

いつもIEを使わないので、自分のサイトもFirefoxでしか見ていなかった。
これがシロウトの悲しさ。以前もIEでCSSが効かなかったり、表示が異なる不具合で苦労していたのに、そのことをすっかり忘れていた。
今日互換IE7、8、9で見て唖然とした。こんな状態の玄関を公に曝していたのかと思うと、恥ずかしさ×情けなさ＝IEやっぱりきらいだ感100倍となった。
それに、ダッシュボードからインストールできるようなテーマは、きっとハックなどもしっかり考えて作られているはずだと、思い込んでもいた。大間違いであった。
なんとかIE7、8、9では修正。でもIE6だとどう見えるんだろう。考えたくない。

以下は修正メモ。

1. clearfixが効かない

CSSにハックを追加
いろいろ書き方があるみたいだけれど、効かないものもあった。
IE6は未検証。
/* IE6 */
* html .clearfix { zoom: 1;}
/* IE7 */

*:first-child+html .clearfix { zoom: 1;}

2.HTML5 のタグが効かない

HTML5は、CSSだけで色んな事が出来るようになったんだあと、よくわからないなりに感心していたけれど、古いIEではまったく効かない。
グラデーションや不透明指定が効かないぐらいはいいけれど、sectionやarticle、footerといった要素とclearfixの組み合わせが、上記のハックでは解決されず、親要素が子要素を包含してくれない（という言い方で良かったっけ? HTMLとCSSも怪しいからなあ）。
これの解決には　head内にscriptを書く。

<script type=”text/javascript”>
   document.createElement(“header”);
   document.createElement(“nav”);
   document.createElement(“section”);
   document.createElement(“article”);
   document.createElement(“aside”);
</script>
あるいは、以下のように外部からjavascriptを読み込ませる。


効き目があったのは直接書き込む方法でもなぜか、IE8だけfooter 要素の clearfixが効かず。結局、footerの周りをdivで囲み、そこに背景を指定する。
また、footer要素のcopyrightの表示も修正されず、divに変え、位置も変える。
CSS編集。

（の場所で作成中のWpはHTML4なのであまり問題はなかったけれど、それでも余分なコードで妙な空きが出てしまったり、位置調整で手間どった。）

3. 画像制御が効かない

怖ろしかったのはこれ。画像はインパクトがあるけれど、崩れると逆インパクトも大きいということがよくわかった。

スライドショー
全ての画像がわらわらと並んでしまっていたが、scriptで改善された。
・IE7 スライドショーに指定したトップ画像のみ固定で表示
・IE8 slideの遷移ボタンがドットではなくディスクになるも作動
・IE9～問題なく作動
アイキャッチ画像
大きいサイズのリサイズが効かず、そのまま表示される。そのためレイアウトが大きく崩れてしまう。これはjavascriptで解決されず、画像をはずすかリサイズしてアップしなおす必要があった。
画像は横が620ピクセル以下にすること。（ただし、これ以下でもリサイズされない場合もあった）

まだ一部の画像（トップページ以外）は未修正。
タイトルの明朝も汚いので、変更しなきゃ。でも明日にしよう。

以上参考サイトはたくさんありすぎて割愛。
今回ものりちゃんのサイトにお世話になった。