DAICHIFIVE^™ blog

cssでフォントサイズを1em=10pxに初期化するにあたり、これまで使用していた手法がIE8の登場によって無残にも使えなくなったため、新たな手法をメモ。

不本意ながら、以下の手法に落ち着いた。

HTMLソース

<!--[if IE]>
    <link href="css/basefontsize_ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>-->
    <link href="css/basefontsize.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css">

HTMLのHEADタグ内でCSSを読み込む箇所です。すごく面倒なやり方で申し訳ないですけど、ベースフォントサイズのみを記述したCSSファイルをIE用とその他用に作ってます。ほんとごめん！

basefontsize_ie.css

body {
    font-size: 62.5%;
}

中身は、これだけ。

basefontsize.css

body {
    font-size: 10px;
}

こっちも、これだけ。

style.css

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

これが、通常使用するCSSファイルです。上のほうに、上記を記述しておきます。

結論

ファイルが増えたぜ！