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

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

Posted at July 24,2006 2:12 AM
Tag:[CSS]

CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table(th/td)にフォントサイズが反映されないという問題があります。

この不具合を回避するには2通りの方法があります。

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

ひとつめの方法は、テンプレート1行目にあるXML宣言

<?xml version="1.0" encoding="utf-8"?>

を削除します。
XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします(「後方互換モード」と「標準準拠モード」については後述)。

2.th 要素、td 要素に直接プロパティを設定する

後方互換モードのままでも、例えば

th, td {
  font-size: 10px;
}

と設定することで、プロパティの値を反映させることができると思います。

標準準拠モードと後方互換モード・DOCTYPE宣言について

IEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のような DOCTYPE 宣言(文書型宣言)に依存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

標準準拠モードと後方互換モード、および DOCTYPE 宣言の種類等については下記に詳細な説明があります。

今すぐ調べる!ホームページ作成リファレンス標準モードと互換モードについて
カスタムチャンス! 雑記帖文書型宣言とブラウザの表示モード

XML宣言が記述されている場合に「後方互換モード」になる

IE5.5/6.0 では DOCTYPE 宣言を1行目(先頭)に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。

Lucky bag::blogxml宣言について

IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない

IE5.5/6.0 の後方互換モード(および5.5以前)の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。

CSSバグリスト@CSSバグ辞典スレッドフォントサイズの指定が表要素に継承されない

上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。

color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform

関連記事
トラックバックURL


トラックバック

文字サイズの不具合 from Ricordo
少し前から当Blogのカウンター(サイドメニュー右下)と記事下部の広告の文字サイズの不具合がありました。 [続きを読む]

Tracked on July 24, 2006 8:40 PM

修正 from Wahnsinn-stil.com
中央カラムの、エントリーより上の部分がInternet Explorer系とN... [続きを読む]

Tracked on July 27, 2007 6:47 AM

修正履歴 from Wahnsinn-stil.com
中央カラムの、エントリーより上の部分がInternet Explorer系とN... [続きを読む]

Tracked on August 3, 2007 2:02 AM

XML宣言とIE6の罠 from 小松川技術研究所
IE5.5/6.0では、XHTMLの定義 <?xml version="1... [続きを読む]

Tracked on December 11, 2007 3:34 PM
コメント

早速エントリーして頂きありがとございます。
詳細説明もリンクして頂き「標準準拠モード」を推奨されるように書かれてありますので、今回の「標準準拠モード」を記事内容を参考にして
修正してみましたところ文字サイズの不具合も解決しました。
ありがとございました!
そこで後、当Blogのサイドメニュー右下のカウンターなのですがMozilla Firefox1.5.0.4で拡張機能「Web Developer」を設定したものでみるとカウンターは、Hyper_Index v.3.03を使用しておりますが動作しません。
他のIE6などでは動作するのですが何かこれも拡張機能を設定する事による不具合だと思うのですが拡張機能を残したままで対処する方法などはあるのでしょうか?
この件に関してはまた、お手すきの時にでもご返答頂ければと思います。
ではでは今回もありがとございました。

[1] Posted by panser : July 24, 2006 7:58 PM

>panserさん
こんばんは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
Hyper_Indexにつきましては、配布サイトにFAQ掲示板があるようですので、申し訳ございませんがそちらでご質問頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro : July 25, 2006 12:14 AM

先ほどこちらの方へトラックバックさせて頂きました。ご連絡遅れましてすみません。うまくトラックバックいけてますでしょうか?

[3] Posted by panser : July 25, 2006 1:29 AM

>panserさん
こんにちは。
ご連絡ありがとうございます。
トラックバック、正常に受信できてますのでご安心ください。

[4] Posted by yujiro : July 25, 2006 11:05 AM

テンプレート修正後、テーブルの文字が大きくなって困っていたので、大変参考になりました。

ありがとうございました。

[5] Posted by もぐら : December 26, 2006 10:45 AM

>もぐらさん
こんにちは。
ご連絡ありがとうございました。
お役に立ったようで良かったです。
ではでは!

[6] Posted by yujiro : December 26, 2006 3:01 PM

成程、メールフォームのあるページだけXML使用だったのですが、
文字サイズが豆になってしまうので何故だろうと悩んでいたのが解決しました。
ありがとうございます。

しかしtdに対しスタイルシートで指定、という方法をとった所、
GECKOエンジンのみ
セル内のテキストエリアの文字サイズに反映されないようです。
あとはGECKOエンジンのみimgのtitle属性・alt属性の
いずれもチップが表示されないとかそんなバグもあるみたいです。
色々悩ましいですね。

[7] Posted by MIO : November 14, 2009 2:18 PM

>MIOさん
こんにちは。
コメントありがとうございます。
CSSハックを使わないと複数ブラウザへの対応が難しいですね。

[8] Posted by yujiro logo : November 16, 2009 12:25 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)