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を読み込ませる。

<!--[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ピクセル以下にすること。(ただし、これ以下でもリサイズされない場合もあった)

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

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

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

コメント

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


*


*