CSS-HACK writing and Internet Explorer comments for mainstream browsers

For front-end workers, the most painful thing is debugging browser compatibility. the most painful thing is that Microsoft's three versions ie6.0/ie7.0/ie8.0.CodeIn mainstream browsers, we have to write corresponding styles for various browsers. In this article, qingbird will summarize CSS's hack compatibility with various browsers (mainly IE6, IE7, IE8, and ff) and the use of IE-specific conditional annotations.
I. general differentiation methods:
IE6 and IE7 can recognize *, while standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important;
IE7 can recognize * and can also recognize! Important;
IE8 can recognize \ 0, cannot recognize *, +, _, * +! Important;
FF cannot recognize *, but can recognize it! Important;
For exampleStyle = "* width: 10px! Important; width: 20px ;"In IE7, the width is 10px, and in IE6, the width is 20px.
There are three other methods:
First

Width 100 Px ;/ * Firefox And other browsers * /
Width 200 Px \ 0 ;/ * IE8 Recognize \ 0 * /
* Width 300 Px ! Important ;/ * , IE7 Able to recognize * Can also be identified Important * /
* Width 400 Px ;/ * IE6 Can also be identified * No. * /
/ * Mr. Think Tip: Pay attention to the writing order @ Mrthink . Net * /

Second

Width 100 Px ;/ * Firefox And other browsers * /
Width 200 Px \ 0 ;/ * IE8 Recognize \ 0 * /
* Width 300 Px ;/ * IE7 Can also be identified * No. * /
_ Width 400 Px ;/ * IE6 Recognize underlines * /
/ * Mr. Think Tip: Pay attention to the writing order @ Mrthink . Net * /

Third

Width 100 Px ;/ * Firefox And other browsers * /
Width 200 Px \ 0 ;/ * IE8 Recognize \ 0 * /
+ Width 300 Px ;/ * + Recognition only IE7 * /
_ Width 400 Px ;/ * IE6 Recognize underlines * /
/ * Mr. Think Tip: Pay attention to the writing order @ Mrthink . Net * /

Ii. Uncommon hack (OP indicates opera, sa indicates Safari), of which 3rd are more practical
1 .. color1 {color: # f00; color/* \ **/: # 00f/* \ **/}/* IE6, IE7, IE8, FF, op, sa recognition */
2 .. color2 {color: # f00; color/* \ **/: # 00f/* \ 9 **/}/* IE7, IE8, FF, op, sa recognition */
3. color3 {color: # f00; color/* \ **/: # 00f \ 9}/* IE6, IE7, IE8 recognition */
4 .. color4 {color: # f00; color/* \ **/: # 00f \ 9}/* IE7, IE8 recognition * // * There is a space between "color" and */
3. Hack supported by various browsers
Width: 100px \ 0;/* supports IE8 */
_ Width: 100px;/* supports IE6 */
[Width: 100px;/* supports IE6, 7 */
+ Width: 100px;/* supports IE6, 7 */
* Width: 100px;/* supports IE6, 7 */
* Width: 100px! Important;/* supports IE6, 7 ,*/
* + Width: 100px;/* supports IE6, 7 ,*/
* + Width: 100px! Important;/* supports IE6, 7 ,*/
Width: 100px \ 9;/* supports IE6, 7, 8 */
Width: 100px! Important;/* supports IE6, 7,8, FF */
W \ idth: 100px;/* ie5.x does not support IE6, IE7, IE8, and FF */

Iv. Rules for using HTML condition annotations unique to IE
1. Only visible to IE

<! -- [If IE]> the content here is only visible to IE <! [Endif]->

2. Only IE6 visible Writing Method

<! -- [If IE 6]> the content here is only visible to ie6.0 <! [Endif] -->

3. Only IE7 visible Writing Method

<! -- [If IE 7]> the content here is only visible to ie7.0 <! [Endif] -->

4. Display format of version ranges

<! -- [If lt IE 6]> versions earlier than IE6 and IE6 are recognizable <! [Endif] --> <! -- [If gte ie 6]> IE6 and IE6 and later versions can be recognized <! [Endif] --> <! -- [If lt IE 7]> versions earlier than IE7 and IE7 are recognizable <! [Endif] --> <! -- [If gte ie 7]> IE7 and IE7 versions can be identified <! [Endif] -->

5. Non-ie-visible Writing Method (Note: This article does not comply with web standards, but it is indeed practical.)

<! -- [If! IE]> the content here is not visible to ie Only <! [Endif] -->

From mr. Think's blog: http://mrthink.net/cssandhtml-hack-mainbrower/