コニファ・ロゴ

csstest:IE8の罫線が意図したように表示されないバグの対処(この記事は2012年より前のものです)

通常、tdタグの属性がtableタグの属性よりも優先されます。しかしInternet Explorer 8の互換モードでは、重なり合う罫線が意図したように表示されないバグがあります。

DOCTYPE宣言によるIE8の互換モード(Quirksモード):

  1. DOCTYPE宣言の記述無し
  2. HTML3.0以下のDOCTYPE宣言を記述している。
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
  3. HTML4.01 Transitional/FramesetのDOCTYPE宣言でシステム識別子(DTDのURL)を記述していない。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. 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;"

 

 

戻るボタン