IE7で属性セレクタを使用する際の問題

IE 7は属性セレクタに対応とされていますが、一部サポートされていないプロパティがあったり、完全対応とは言えないようです。

属性セレクタを実際に使用する機会があり、IE7で確認したところ機能していないケースがありました。

  • 元々、th, tdのパディングはtableの属性cellpaddingで指定している
  • CSSリセットで、th, tdに対してpadding: 0を指定、CSSが優先されている
  • セルのパディングが0になっているため、見た目が変わっている

こういったテーブルがかなりの数あるので、属性セレクタで一括して対応することにしました。

具体的には、
<table cellpadding=”5″>の場合

table[cellpadding="5"] th,
table[cellpadding="5"] td {
    padding: 5px;
}

これで、属性セレクタに対応しているブラウザであれば適切なパディングが設定されるはずですが、対応しているはずのIE7でパディングは0のままです。

どうも、IE7の属性セレクタ対応にもれがあって、tableの属性のうち、値に文字をとるalign属性などは機能しますが、値に数値をとる属性(width, height, cellpadding, cellspacingなど)は機能しないようです。

参考記事
Attribute Selector problems in IE7 CSS forum at WebmasterWorld