HTML5+CSS3でサイトを制作していくと、IEの対応が正直面倒になってきます。今回制作中にIEで起きた問題を羅列していきます。

使っているJavaScript

今回僕が使ったのはmodernizr.jsというのになります。logwではhtml5.jsを使っていますがこのJavaScriptは今回は使っていません。

グラデーションが効かない

modernizr.jsはCSS3のグラデーションをサポートしています。firefoxやchromeでは効いたのですがなぜかIE9以下ではききませんでした。
※僕のやり方が悪いだけかもしれません。出来ている人がいるかわかりませんが・・

ただ、角丸やbox-shadowは効いていたのでサポートされていないだけかなと思いました。まずはコードを貼ってみます。

/*-------------------------------------------
	右寄せ設定
-------------------------------------------*/
a.read_more{
border-style:solid;
border-width:1px;
border-color:#919090;
background-color:#bdbdbd;
color:#3a3939;
float:right;
margin-bottom:22px;
font-size:9pt;
text-align:right;
padding:5px 10px;
display:block;
color:#000;
text-decoration:none;
text-shadow:1px 1px #fff;
}

/* 余白解除 */
#contents aritcle .post p a.read_more{
margin-bottom:1em;
}

/* 角丸設定 */
.borderradius a.read_more{
border-radius:3px;
}

/* グラデーション設定 */
.cssgradients a.read_more{
background:-moz-linear-gradient(top, #fff, #bdbdbd);
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#bdbdbd));
}

/* ボックスshadow設定 */
.boxshadow a.read_more{
box-shadow:0px 1px #ccc;
}

これはWordPressのサイトで「続きを読む」のボタンの箇所のスタイルになります。a.read_moreで基本的なスタイルの指定をしています。モダンブラウザには角丸でグラデーションのボタンがかかったのを表示するために26行目からスタイルを追加しています。

firefoxやchromeとIE9での表示の違いは下の画像みたいになってしまいます。

角丸とbox-shadowは効いていますがグラデーションが効いていないです。IE9はモダンブラウザですがどうもmodernizrではサポートされていないのかもしれません。

IEに対応するために独自のフィルタを使用

IE独自のfilterを使います。CSS3の対応も考えましたがうなくいかなかったりしたためになります。今回はグラデーションの設定をしたいので上記コードのグラデーション設定に追加してみます。

/* グラデーション設定 */
.cssgradients a.read_more{
background:-moz-linear-gradient(top, #fff, #bdbdbd);
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#bdbdbd));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#bdbdbd');
}

filterを追記しました。GradientType=0は、縦向きの意味です。横向きにグラデーションをかけたい場合はGradientType=1とします。startColorstrは始まりの色になります。endColorstrは終わりの色です。実際に追記してみるとわかりますが、反映されません！！

なぜ反映されないか？

どうもこのfilterを適用させるには、適用させる要素にwidth(横幅)とheight(高さ)が必要となります。上記のコードでは確かに両方ともありません。18行目の下に追記してグラデーション設定からは削除します。

a.read_more{
border-style:solid;
border-width:1px;
border-color:#919090;
background-color:#bdbdbd;
color:#3a3939;
float:right;
margin-bottom:22px;
font-size:9pt;
text-align:right;
padding:5px 10px;
display:block;
color:#000;
text-decoration:none;
text-shadow:1px 1px #fff;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#bdbdbd');
}

/* グラデーション設定 */
.cssgradients a.read_more{
background:-moz-linear-gradient(top, #fff, #bdbdbd);
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#bdbdbd));
}

このようにします。これで再度見てみると、グラデーションがちゃんと効いています。

IE8以下でCSSが効かない

IE9とfirefoxやchromでは効くのですが、なぜかIE8にはCSSがききませんでした。HTMLコードは下のように記述しています。

<div id="contents"><!-- contents_start -->
<aritcle><!-- aritcle_start -->
<div class="post"><!-- post_start -->
<h2 class="title"><a href="#">記事タイトル</a></h2>
<div class="blog_info"><!-- blog_info_start -->
<ul>
<li class="calendar">2013.1.1</li>
</ul>
</div><!-- blog_info_end -->

<div class="entry"><!-- entry_start -->
<h3>見出し3<br /><span>ああああああああああああ</span></h3>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>

<p><a href="#" class="read_more">続きを読む&#9758;</a></p>
</div><!-- entry_start_end -->
</div><!-- post_end -->
</aritcle><!-- aritcle_end -->
</div><!-- contents_end -->

普通のHTMLです。HTML5のタグが少しはいっているくらいです。CSSは下のように記述しています。

/*-------------------------------------------
	見出し3
-------------------------------------------*/
#contents aritcle .post .entry h3{
margin-bottom:1em;
font-size:18pt;
border-style:solid;
border-width:1px;
padding:10px;
border-color:#919090;
background-color:#f8fbfd;
color:#0860a9;
line-height:1em;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#f8fbfd');
}

#contents aritcle .post .entry h3 span{
font-size:12pt;
}

/* 角丸 */
.borderradius #contents aritcle .post .entry h3{
border-radius:3px;
}

/* グラデーション */
.cssgradients #contents aritcle .post .entry h3{
background:-moz-linear-gradient(top, #fff, #f8fbfd);
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8fbfd));
}

CSS3を使っています。firefox、IE9では見出しの箇所がちゃんと反映されるのですが、IE8だと見出し3のスタイルが全て効きません。

原因

#contents aritcle .post .entry h3をpost .entry h3にしたら反映されました。おそらくIE8以下ではHTML5の要素が入っていると効かないのかもしれません。HTML5に対応するJSなどを別途いれても改善されませんでした。なので別途IE用のCSSを作り条件付きコメントCSSで対処しました。

/*-------------------------------------------
	見出し3
-------------------------------------------*/
.post .entry h3{
margin-bottom:1em;
font-size:18pt;
border-style:solid;
border-width:1px;
padding:10px;
border-color:#919090;
background-color:#f8fbfd;
color:#0860a9;
line-height:1em;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#f8fbfd');
}

<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->

こんな感じです