CSS-HACK writing and comment of IE6.0/IE7.0/IE8.0

Source: Internet
Author: User

Ie6.0/ie7.0/ie8.0. in order to make the written code run normally in various mainstream browsers, we have to write corresponding styles for various browsers. In this article, the bloggers will summarize the css Compatibility with hack (mainly ie6, ie7, ie8, and ff) for various browsers and the use of ie-specific conditional annotations.
I. General differentiation methods:
The ie series can recognize 9;
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 and cannot recognize *, +, _, * and! Important;
Ff cannot recognize *, but can recognize it! Important;
For example, style = "* width: 10px! Important; width: 20px; ", the width in ie7 is 10px, and the width in ie6 is 20px.
There are three other methods:
First

View sourceprint? 1 width: 100px;/* firefox and other browsers */

2 width: 200px;/* ie8 recognizable */

3 * width: 300px! Important;/*, ie7 can recognize both * and important */

4 * width: 400px;/* ie6 can recognize */

5/* mr. think prompt: pay attention to the writing order @ mrthink.net */

Second

View sourceprint? 1 width: 100px;/* firefox and other browsers */

2 width: 200px;/* ie8 recognizable */

3 * width: 300px;/* ie7 can recognize */

4 _ width: 400px;/* ie6 can recognize underlines */

5/* mr. think prompt: pay attention to the writing order @ mrthink.net */

Third

View sourceprint? 1 width: 100px;/* firefox and other browsers */

2 width: 200px;/* ie8 recognizable */

3 + width: 300px;/* + only recognizes ie6 ie7 */

4 _ width: 400px;/* ie6 can recognize underlines */

5/* mr. think prompt: 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/***/: #00f9}/* ie7, ie8 recognition * // * there is a space between "color" and */
3. hack supported by various browsers
Width: 100px;/* 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: 100px9;/* supports ie6, 7,8 */
Width: 100px! Important;/* supports ie6, 7,8, ff */
Width: 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

View sourceprint? 1 The content here is only visible to ie <! [Endif]->

2. Only ie6 visible writing method

View sourceprint? 1 <! -- [If ie 6]> the content here is only visible to ie6.0 <! [Endif] -->

3. Only ie7 visible writing method

The content here is only visible to ie7.0

4. Display format of version ranges

View sourceprint? 1 ie6 and earlier versions are recognizable
View sourceprint? 1. ie6 and later versions are recognizable.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.