FF/IE6/IE7のための特別なCSS HACK_Experience交換

CSS HACK についての記事です この記事で取り上げる CSS HACK は class と id の属性に対する HACK であり、並び順に要件があります。今日お話したいのはclassとidのCSS HACKです。                     

コードをコピー コードは次のとおりです:

.test{/* FF*/
高さ:20ピクセル;
背景色:オレンジ;
}
* html .test{/*IE7*/
高さ:20ピクセル;
背景色:青;
}
*html .test{/*IE6*/
高さ:20ピクセル;
背景色:黒;
}

上記の CSS コードを見ると、FF が依然として最も従順なブラウザであることがわかりますが、IE6 および IE7 で HACK を使用したい場合は、先頭に HTML タグを追加する必要があります。ここで覚えておくと簡単ですが、IE6 では *html が追加され、IE7 では *html が追加され、バージョンが追加されたことを意味します。 classとidに対するCSS HACKのメリットは、順序を意識する必要がなく、経営者などに受け入れられやすいことであり、JSブラウザと同様のバージョン管理もこのHACKで実現できます。欠点は、大量のコードが生成されることかもしれません。さて、まずはこれらについて話しましょう。​

上記の内容を読んだ後、下の効果をクリックすると、さまざまなブラウザで効果を確認できます。オレンジは FF、青は IE7、黒は IE6 を表します。​

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>スクリプト ホーム www.jb51.net CSS ハック</title> <style type="text/css"> *{ マージン:0; パディング:0; } .test{/*FF*/ 高さ:20ピクセル; 背景色:オレンジ; } * html .test{/*IE7*/ 高さ:20ピクセル; 背景色:青; } *html .test{/*IE6*/ 高さ:20ピクセル; 背景色:黒; } </スタイル> <div class="test"></style>