css - CSS：最初の子セレクターIE7

Question

IE7の問題はほとんどありません。次のCSSコードがありますが、IE7では機能しません。ただし、.row [class * = "span"]と：first-childは、組み合わせていない場合は両方とも機能します。同様のことをしたり、何らかの方法で機能させる方法はありますか？

.row [class*="span"]:first-child {
    margin-left: 0;
}

Answer 1

最初の子が [class*="span"]である場合は、その前にHTMLコメントがあるかどうかを確認してください。存在する場合、IE7はコメントが最初の子であると誤って判断するため、探している要素と一致しません。

コメントを削除するためにマークアップを変更できない場合は、ここで説明するオーバーライド手法を使用して回避できます。

.row [class*="span"] {
    margin-left: 0;
}

.row [class*="span"] ~ [class*="span"] {
    margin-left: /* Reset the left margin for other elements */;
}

リセットするマージン値がわからない場合は、* + htmlハックでIE7の動作を対象とする別のセレクターを追加してみてください。

.row [class*="span"]:first-child, * + html .row :first-child + [class*="span"] {
    margin-left: 0;
}

:first-child + [class*="span"]IE7の最初の子であるコメントノードが1つだけ続く場合、その要素に一致します。