エントリー本文
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
- asciiTBPingfilter プラグイン
- IE7 の CSS ハック
- CSS の after 擬似要素で回り込みを解除する
- mixi
- リンク画像の枠線を消す
- CSSで画像に影をつける(ドロップシャドウ)
- リストマークの画像のずれを修正する
- 234万5678アクセス特別企画
- Internet Explorer 6 と Internet Explorer 7 を共存させる
- Slider によるフォントサイズ変更でアクセシビリティを向上させる
- IE7 で pre 要素が適正に表示されない不具合を修正
- CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
- CSS でヘッダーに画像を表示する for Movable Type 4
- CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)
- Highslide JS でサムネイル画像を拡大表示する(設定方法の変更)
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- グローバルナビゲーション(その1:基本スタイル)
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- IE7 の CSS ハック
- 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さん
こんにちは。
ご連絡ありがとうございます。
トラックバック、正常に受信できてますのでご安心ください。
テンプレート修正後、テーブルの文字が大きくなって困っていたので、大変参考になりました。
ありがとうございました。
>もぐらさん
こんにちは。
ご連絡ありがとうございました。
お役に立ったようで良かったです。
ではでは!
