HTML,CSSバグ＆回避法リスト : 1. 目次

HTML,CSSバグ＆回避法リスト

【目次：数字キーでアクセスできます】


1.	目次
2.	HTML関連
2.1		tableセルのwidth指定が反映されず(各種)
2.2		formタグの前後に空白ができる(各種)
2.3		input,textareaタグの大きさがブラウザ毎に相違
2.4		inputタグは単独使用不可(NS4)
2.5		空セルだと背景が表示されない(NS4)
2.6		多重テーブル(ブロック)の背景処理(NS4)
3.	Netcape4.xとスタイルシート
3.1		ブロックの背景色がうまく塗られない
3.2		ブロックのデフォルトの幅が小さい
3.3		インライン指定時にフォント,前景色指定無視
3.4		インライン指定時にフォント,前景色指定が前後に波及
3.5		連続要素でフォントサイズ継承
3.6		和名フォント指定時にスタイル指定無視
3.7		line-heightを指定した要素に画像があると行がずれる
3.8		画像・リスト項目・フォームでは表示が崩れる
3.9		class名,ID名にアンダースコアを使うと指定無視(NS4.6-)
3.10		インライン指定時にハイフンで始まる属性を使うと指定無視
3.11		外部スタイルシート内の相対パスの扱いに問題
3.12		その他のNS4のバグ
3.13		NS4対策の勘所
4.	スタイルシートその他の話題


4.1		どの属性がどの要素にどう継承するか不統一
4.2		ブロックの幅が指定したwidth値より大きい(NS6,NS7,OP6)
4.3		width:100%を指定すると親要素の幅を超える(NS6,NS7,OP6)
4.4		入れ子テーブルでmargin指定すると横幅超過(IE4,5,6)
4.5		float指定時の問題(各ブラウザ)
4.6		特定フォントを指定すると文字化け(IE4)
4.7		その他のCSSバグ
4.8		IE4+,NS6+,Opera対策の勘所(暫定)
4.9		IE3のバグや癖など
4.10		IE3対策の勘所
5.	ブラウザ別にスタイルシートを指定
5.1		Netscape4.xに対する対策の必要性
5.2		@importを使ってNS4を除外
5.3		複数mediaを指定してNS4を除外
5.4		JavaScriptでブラウザ判別
5.5		サーバ側スクリプトでブラウザ判別
5.6		条件分岐コメントでIE5+を判別
5.7		まとめ
6.	その他・総合
6.1		ブラウザによって文字サイズ・行間・フォントが相違
6.2		文字サイズ変更の可否が不統一
6.3		XHTMLのページを表示できない(MacIE4.5)
6.4		指定外部ファイル(CSS,JS)が存在しないとページが表示されない(NS4)

なお下記についてはJavaScript版バグ＆回避法リストを見てみて下さい。

【JavaScript版バグ＆回避法リストより抜粋】

	windowをリサイズするとCSSを使ったレイアウトが崩壊(NS4)
	フォームにfocusすると矢印キーなど殆どのキー入力無視(NS4)
	同様にFlashオブジェクトにfocusするとキー入力無視(各ブラウザ)
	accesskeyの動作がブラウザ毎に異なる(各ブラウザ)
	メニューフレーム内のページ内リンクをクリックすると focusが本文フレームに移る(IE5.5,6)
	スクリプトタグがあるとページ内リンクの位置がずれる(IE4,5)

更新情報

2003/1/1

公開予定

このページは普段ホームページを作っていてブラウザのバグや独特？の仕様、各ブラウザでの実装の違いなど気が付いたことをまとめたものです。すぐ試せるようにできるだけ症状が出るサンプルを載せ、その回避方法についても触れるようにしました。

勘違いしているところ、或いはバグ回避のうまい方法があったらお知らせください :-)。

問題点だけ列挙してもとっつきにくいと思うので「バグや互換性問題を避けるコーディング作法」のページを作りたいと思っています。

注１：	「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注２：	ブラウザ名で特に指定が無いものはWindows版についての記述です。
注３：	スタイルシートについては、特に断りの無い限り互換モードについての記述です。

例：「2.1節」は「2｣キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。

3.	Netcape4.xとスタイルシート

4.	スタイルシートその他の話題

5.	ブラウザ別にスタイルシートを指定

■キー割当表示 [Shift-H]	─ KeyNavi：キーボードを活用してホームページを快適に─
ホーム [0] HTML,CSSバグ＆回避法リスト:1.目次 [1]	・サイトマップ [Shift-S]

ホーム [0] HTML,CSSバグ＆回避法リスト:1.目次 [1]	・サイトマップ [Shift-S]
■キー割当表示 [Shift-H]	─ KeyNavi Project 2003 ─