CSS のフォントサイズ指定が table に反映されない問題
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宣言を記述しても後方互換モードとして解釈されるためです。
IE5.5/6.0 の後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されない
IE5.5/6.0 の後方互換モード(および5.5以前)の場合、親要素に設定した下記のプロパティが子要素の table に反映されないというバグがあります。標準準拠モードでは問題なく表示されます。
上記サイトからの引用で、 IE5.5/6.0 後方互換モードの場合、親要素に設定した下記のプロパティが子要素の table に反映されないようです。
color font-size font-style font-variant font-weight letter-spacing line-height text-decoration text-transform
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か?
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ 文字サイズの不具合 from Ricordo
少し前から当Blogのカウンター(サイドメニュー右下)と記事下部の広告の文字サイズの不具合がありました。 [続きを読む]
≫ 修正 from Wahnsinn-stil.com
中央カラムの、エントリーより上の部分がInternet Explorer系とN... [続きを読む]
≫ 修正履歴 from Wahnsinn-stil.com
中央カラムの、エントリーより上の部分がInternet Explorer系とN... [続きを読む]
≫ XML宣言とIE6の罠 from 小松川技術研究所
IE5.5/6.0では、XHTMLの定義 <?xml version="1... [続きを読む]
早速エントリーして頂きありがとございます。
詳細説明もリンクして頂き「標準準拠モード」を推奨されるように書かれてありますので、今回の「標準準拠モード」を記事内容を参考にして
修正してみましたところ文字サイズの不具合も解決しました。
ありがとございました!
そこで後、当Blogのサイドメニュー右下のカウンターなのですがMozilla Firefox1.5.0.4で拡張機能「Web Developer」を設定したものでみるとカウンターは、Hyper_Index v.3.03を使用しておりますが動作しません。
他のIE6などでは動作するのですが何かこれも拡張機能を設定する事による不具合だと思うのですが拡張機能を残したままで対処する方法などはあるのでしょうか?
この件に関してはまた、お手すきの時にでもご返答頂ければと思います。
ではでは今回もありがとございました。
>panserさん
こんばんは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
Hyper_Indexにつきましては、配布サイトにFAQ掲示板があるようですので、申し訳ございませんがそちらでご質問頂けますでしょうか。
それではよろしくお願い致します。
先ほどこちらの方へトラックバックさせて頂きました。ご連絡遅れましてすみません。うまくトラックバックいけてますでしょうか?
>panserさん
こんにちは。
ご連絡ありがとうございます。
トラックバック、正常に受信できてますのでご安心ください。
テンプレート修正後、テーブルの文字が大きくなって困っていたので、大変参考になりました。
ありがとうございました。
>もぐらさん
こんにちは。
ご連絡ありがとうございました。
お役に立ったようで良かったです。
ではでは!
成程、メールフォームのあるページだけXML使用だったのですが、
文字サイズが豆になってしまうので何故だろうと悩んでいたのが解決しました。
ありがとうございます。
しかしtdに対しスタイルシートで指定、という方法をとった所、
GECKOエンジンのみ
セル内のテキストエリアの文字サイズに反映されないようです。
あとはGECKOエンジンのみimgのtitle属性・alt属性の
いずれもチップが表示されないとかそんなバグもあるみたいです。
色々悩ましいですね。
>MIOさん
こんにちは。
コメントありがとうございます。
CSSハックを使わないと複数ブラウザへの対応が難しいですね。