HTMLの落とし穴

トップ > チップス > HTMLの落とし穴

/tips/html/trap01 html,css記述の際によくはまる落とし穴を集めました。InternetExplorerのバグ回避術とも言えそうです。

**[IE6,7]ブロック要素の幅が正しく反映されない 2008.8.8 以下のようなブロック要素を仮定します。 :

スタイルは以下の通りです。幅が200pxで左右のパディングをそれぞれ20pxに設定しています。 :div#foo{ : width: 200px; : height: 60px; : background-color: #999; : padding: 0px 20px 0px 20px; :} Firefoxでは、200＋20×2＝240px幅のブロックとして表示されます。 {image:ff.png}

一方、InternetExplorerでは、パディング幅が加算されず、そのまま200pxのブロックとして表示されます。 {image:ie.png}

この挙動の違いによるレイアウトのずれをなくすためには、以下のように{strong:ブロック要素をネストして、幅とパディング（マージンも）を別々の要素に指定する}必要があります。だから、巷のHTMLソースはやたらとdivの入れ子が深いんですね。 :

:div#bar_outer{ : width: {strong:240px;} /* paddingの分を加算 */ : height: 60px; : background-color: #999; :} :div#bar_inner{ : padding: 0px 20px 0px 20px; :}

**[IE6]画像ボタンの値が送信されない 2007.1.9 フォームのメソッドがgetである場合に、画像ボタンに名前と値を設定しても、パラメタに反映されません。 :

: :

IE6 :?name.x=1&name.y=1 Firefox :?name=value&name.x=1&name.y=1

**[IE6]margin: autoが効かなくなる 2007.1.9 DOCTYPE宣言の前にxml宣言()があると、IE6のレンダリングモードが切り替わり、ブロック要素の中央寄せができなくなります。

**[IE6,7]JavaScriptの配列が読み込めない 以下のように、最後尾の配列の後ろに「,」が残った多次元配列の宣言はFirefoxでは、問題なく動きます。Java(≠JavaScript)でも、同様の記法は認められています。 :var arr = [ : ['foo','bar'], : ['a','b','c']{strong:\,} :] ; しかし、IEでは、この宣言は無効になります。実行時にもエラーは出ず、配列の宣言が無効化されるだけなので、原因が分かりにくいという問題もあり、なかなか厄介です。

**[IE6,7]実体参照「'(シングルクォート)」を解釈できない 以下のコードをブラウザで表示すると、どう見えるかという実験をしました。「'」は「'（シングルクォート）」の実体参照です。 :'

{strong:Firefox} {image:ff-apos.png}

{strong:Internet Explorer} {image:ie-apos.png}

Internet Explorerは、実体参照の解釈を正しく行うことができません。

• タグ別一覧: [trap01]
• チップス一覧