wordpress IE6用の調整

いつもIE6には泣かされるが、今回は、max-width と font-familyの対処法

1。max-width

通常は、<img>タグの指定

#content img {

max-width: 100%;

width: auto;

height: auto;

display: block;

}

であんじょう、適切な幅に調整してくれるが、IE6ではこれが効かない。

そのため、IE6専用に「image-resize」というクラスを作ってあげる。

* html #content .image-resize {

width: expression(this.width >= this.height ? “450px” : “auto”);

}

こうして、イメージデータを挿入するときに、詳細設定で、クラスに「image-resize」を指定すると、上記の場合は最大450pxに調整される。(参考にしたサイト

2。今回は、スマートフォンを意識したテーマを使用するため、フォントファミリーにDroidを使ってみた。ところが、IE6ではうまく使えないらしい(その原因は不明)。そこで、IE6用にはMS Pゴシック系を使うようにさせる。

style.css の body には、IE6以外用のfont-familyを記述し、header.phpの<head>内に以下の用にIE6用のfont-familyを指定する。

<!–[if IE]>

<style type=”text/css”>

body{

font-family: “MS Pゴシック”,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,”Meiryo”,Verdana,sans-serif;

}

</style>

<![endif]–>

これで、一応なんとかIE6用に凌ぐことができそう。(参考にしたサイト

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。