• HOME
  • HTML/CSS
  • CSS のフォントサイズ指定が table に反映されない問題を解決

CSS のフォントサイズ指定が table に反映されない問題を解決

管理人:sofu

CSSでbody要素にフォントサイズを指定してる場合、IE6以下で見ると、そのサイズがテーブル内に反映されないという問題があります。この不具合を解決する方法を紹介します。ってこれは昔からあった問題で、既に他サイトでも紹介されている方法なんですけどね。つい最近ハイブリッドでページを作成したときに、この問題のことを思い出したので書いてみました。

元のソース

 
body {
    font-size: 14px;
}
.size {
    border: 1px solid #CCCCCC;
    padding: 3px;
    font-size: 2em;
}
table {
    border: 1px solid #CCCCCC;
    width: 100%;
    background-color: #EEEEEE;
}
table td {
    font-size: 2em;
}
 
 
<table>
    <tr>
        <td>テーブルのフォント</td>
    </tr>
</table>
 

→継承されないサンプル（IE6以下でご覧下さい）

フォントサイズをtdタグではなく、tableタグに指定

 
body {
    font-size: 14px;
}
.size {
    border: 1px solid #CCCCCC;
    padding: 3px;
    font-size: 2em;
}
table {
    border: 1px solid #CCCCCC;
    width: 100%;
    background-color: #EEEEEE;
    font-size: 2em;　　　　←tableタグに指定
}
 

→解決サンプル1

tdにフォントサイズを指定した場合、tableタグが壁になってフォントサイズが継承されません。なので、tdではなくtableタグにフォントサイズを指定してしまおうという方法です。

ページ先頭のXML宣言を削除する

 
<?xml version="1.0" encoding="Shift_JIS"?>	←この宣言を削除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

→解決サンプル2

XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします。
「後方互換モード」「標準準拠モード」については2xup.orgさんの方で詳しく説明されていますのでご覧ください。

date 2010.10.24
blog comments powered by Disqus

PageTop