通常、tdタグの属性がtableタグの属性よりも優先されます。しかしInternet Explorer 8の互換モードでは、重なり合う罫線が意図したように表示されないバグがあります。
DOCTYPE宣言によるIE8の互換モード(Quirksモード):
- DOCTYPE宣言の記述無し
- HTML3.0以下のDOCTYPE宣言を記述している。
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
- HTML4.01 Transitional/FramesetのDOCTYPE宣言でシステム識別子(DTDのURL)を記述していない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- DOCTYPE宣言の前に文字列があるphpの場合などにIEがDOCTYPE宣言無しと判断し、互換モードになってしまう。
●対処:標準モード(Standardsモード)にする
- 1と2の場合、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">を記述。
- 3の場合、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">を記述。
- 4の場合、metaタグで強制的に標準モードを指定。
<meta http-equiv="X-UA-Compatible" content="IE=8" >
- XHTML1.0の場合、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
●プログラムなどが組み込まれていることにより、リセットされるべきcssが残り、バグと複合して影響している場合。
- 影響しているcssを特定できれば、確実にリセットする。
- cssを特定できない場合、不具合が出ているtdに直接cssのborder属性を書き込んでみる。
(例)style="border-width:0px;"