いつも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を読み込ませる。
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
効き目があったのは直接書き込む方法でもなぜか、IE8だけfooter 要素の clearfixが効かず。結局、footerの周りをdivで囲み、そこに背景を指定する。
また、footer要素のcopyrightの表示も修正されず、divに変え、位置も変える。
CSS編集。
（の場所で作成中のWpはHTML4なのであまり問題はなかったけれど、それでも余分なコードで妙な空きが出てしまったり、位置調整で手間どった。）
3. 画像制御が効かない
怖ろしかったのはこれ。画像はインパクトがあるけれど、崩れると逆インパクトも大きいということがよくわかった。
- スライドショー
全ての画像がわらわらと並んでしまっていたが、scriptで改善された。
・IE7 スライドショーに指定したトップ画像のみ固定で表示
・IE8 slideの遷移ボタンがドットではなくディスクになるも作動
・IE9～問題なく作動 - アイキャッチ画像
大きいサイズのリサイズが効かず、そのまま表示される。そのためレイアウトが大きく崩れてしまう。これはjavascriptで解決されず、画像をはずすかリサイズしてアップしなおす必要があった。
画像は横が620ピクセル以下にすること。（ただし、これ以下でもリサイズされない場合もあった）
まだ一部の画像（トップページ以外）は未修正。
タイトルの明朝も汚いので、変更しなきゃ。でも明日にしよう。
以上参考サイトはたくさんありすぎて割愛。
今回ものりちゃんのサイトにお世話になった。
コメント