CSS Hackのいくつかの書き方

3908 ワード

テストに参加したブラウザ:IE 6,IE 7,IE 8,IE 9 Preview,Firefox 3.67,Safari 5.0およびOpera 10.0
以下はIEシリーズのHack表記(注意手順)です.

.color {
	color:#000;/*         */
	color:grey !important;/*  IE6 ，         */
	color:red\9;/* IE     (ie6+)  ，  IE8    “*” “_” css hack；         hack */
	color:orange\0;/* IE8   */
	*color:yellow;/* IE6,IE7   */
	+color:#C0C;/* IE6,IE7   */
	_color:blue;/* IE6   */
}

実行結果:IE 6文字色blue、IE 7は#C 0 C、IE 8はorange、その他のブラウザ(IE 9 Previewを含む)はgrey
また、IE 7は以下の書き方をサポートしている.

*+html .bgcolor {
	background-color:#FF99CC;/*  IE7  “*+html” */
}

以下はIE 6、IE 5のいくつかの書き方(注釈の配置位置に注意):

html/*    */>body .ie6 {
	border:1px dashed #CCC;/* IE6，IE5   */
}
.nie6 {
	display:/*    */none;/* IE6    */
}
.nie56/*    */ {
	display:/*    */none;/* IE6，IE5    */
}

それ以外に、フローティングレイアウトを使用する場合、1つのdivブロックには2つのフローティングdivブロックが含まれており、この親divブロックに次のコードを追加してフローティングをクリアします.

#box:after {/*     , IE6 IE7    */
	content:".";
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}

しかし、残念なことに、この方法はIE 6、IE 7を認識せず、2つのサブdivの後に空のdivを追加してフローティングをクリアすることが多い.
IEシリーズについては、IE特有のコメントを使用して、ブラウザ互換性を達成するために要素に特殊なスタイルを追加することもできます.以下は一般的なIEコメントです.

<!--[if IE]>
	HTML code
<![endif]-->

<!--[if IE 5,6,7,8...]>
	HTML code
<![endif]-->

<!--[if gte IE 5]>
	HTML code
<![endif]-->

<!--[if lt IE 6]>
	HTML code
<![endif]-->

<!--[if lte IE 5.5]>
	HTML code
<![endif]-->

<!--[if !IE]><!-->
	HTML code
<!--<![endif]-->

lt:Less thanの略、つまり小さいという意味です.lte:Less than or equal toの略で、つまり小さいか等しいという意味です.gt:Greater thanの略、つまりより大きいという意味です.gte:Greater than or equal toの略です.つまり、以上です.等しくないという意味で、javascriptの不等しくない判断子と同じです.
参照:http://hszy00232.blog.163.com/blog/static/43022753201001553136921/
いつもHackを書く必要がある場合はIEシリーズなので、他のブラウザではHackをほとんど使っていない場合(個人的には基準に従うと思う場合は、非IEシリーズの互換性を考えすぎて、あなたのページがきれいでない限り)、以下はネット上で出会ってテストしたHackの書き方です.

div.text { /*                    ，       ,Firefox 3.67      ， IE6      IE         */
	-o-text-overflow:ellipsis; 
	text-overflow:ellipsis; 
	white-space:nowrap; 
	overflow:hidden; 
}

この書き方はほとんどのブラウザでサポートされています.
SafariとChromeを互換性のある書き方を以下に示します.

p {[color:#000;color:green;}      /* Safari,Chrome   */

この書き方は、できるだけスタイルの一番後ろに置くように注意してください.それはその後のすべてのスタイルを失効させるからです.
次は2つの擬似クラスが実現する互換性であり、異なるバージョンのブラウザがcss 2に対して2.1またはcss 3.0サポートの違い:

.hack:empty { height:50px !important;border:1px solid #CCC; }/* IE6、IE7、IE8   ，IE9、Firefox 3.67、Safari 5.0、Opera 10.0     empty */
	*:lang(en) p { background:#CCC !important; }/* IE6、IE7   ，IE8、IE9、Firefox 3.67、Safari 5.0、Opera 10.0     lang */

HTMLコードは次のとおりです.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

......

<div class="hack">Hack</div>
<div class="hack"></div>
<div class="hack">Hack</div>
<p>*:lang(en)</p>

実行結果は、中央にコンテンツがないdiv高さ50 pxであり、1 pxフレームがある.p内文字背景色は#CCC
もう一つはOpera向けだそうです.

@media all and (min-width: 0px){div.opera {border:1px soild #CCC;}}/*   Opera          */

互換性については、触れたことのある友人だけがよく知っていると信じられていますが、Hackの内容も多く、完全に列挙するのは難しく、ブラウザの互換性に対する恐怖を克服するには、多くの実践が必要です.初めてオリジナル成分の高い文章を书いて、内容も引き続き更新して、达人达の斧正を歓迎します!

【回転】ASP.NETはタイミングリマインダなどの機能を実現

ASP.NETでウェブサイトの絶対パスを得るいくつかの方法