The hack of CSS

Source: Internet
Author: User

first, class internal hack

IE can recognize *, standard browser (such as FF) does not recognize *, IE6 can recognize *, but does not recognize!important, IE7 can recognize *, can also identify!important; FF does not recognize *, but can identify!important; IE6 support underscores, IE7 and Firefox do not support underscores.

IE6 IE7 Ff
* X
!important X
_ X X

Here is an example, in Google, Firefox display red, IE7 display green, IE6 show the Blue instance.

The final display effect of the code changes to

In general, the order of writing is the Firefox written in front, IE7 written in the middle, IE6 written in the last side.

So for IE7, writing in the back of the high priority, can cover the original to all browsers see. And for IE6, because of the higher priority written in the back, can cover the original written to IE7 and IE6 common view. Without affecting the IE7.

!important, and look at the following line of code

. div1{Background-color:blue;} Mark is important, so IE7 and Firefox will consider it to be higher priority, ignoring the "background-color:blue;" and for IE6, so!important is not recognized, so jump directly over the line code, which is shown in blue.

IE8 IE9 Hack

\9 only IE6789 support, often used to differentiate IE and Firefox

Only IE8 IE9 support

\9\0 only IE9 support

such as the following code, in Firefox, Google display red, IE8 display blue, IE9 display Color:fuchsia color, IE7 display Color:aqua color, IE6 display black.

In fact, the methods are the same, the common support written in front, the individual support written in the back to cover the common support.

. div1{background-color:red; background-color:blue\0;/* ie 8/9*/background-color:fuchsia\9\0; *background-color: Aqua; _background-color:black}

second, selector hack

*+html and *html is the unique label of IE, Firefox is not supported. And *+html is a special label for IE7.

The above code can be understood as: first set all the browser is red, in the set IE browser is blue, in the setting IE7 is green.

Note: *+html's hack to IE7 must ensure that the top of the HTML has the following declaration: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

CSS hack or try to use less, I see other people's website generally do not see the hack code. Page layout if reasonable, basically do not write hack.

Some methods summarize:

Floating in the IE6 double distance problem, can add a display:inline;

. div1{float:left; width:100px; margin-left:100px;}

This code, for example, is in IE6 and in Google.

        

Third, HTML head introduction hack

<!--[if! ie]><!--> In addition to IE can be recognized <!--<! [endif]-->

<!--[if ie]> all IE recognizable <! [endif]-->

<!--[if IE 6]> only IE6 recognizable <! [endif]-->

<!--[if Lt IE 6]> IE6 The following versions are recognized <! [endif]-->

<!--[if GTE IE 6]> IE6 and IE6 above are recognized <! [endif]-->

<!--[if IE 7]> only IE7 recognizable <! [endif]-->

<!--[if Lt IE 7]> IE7 The following versions are recognized <! [endif]-->

<!--[if GTE IE 7]> IE7 and IE7 above are recognized <! [endif]-->

<!--[if IE 8]> only IE8 recognizable <! [endif]-->

<!--[if IE 9]> only IE9 recognizable <! [endif]-->

The instance introduces different CSS files according to different IE instances.

IE6 display effect is: IE7 display effect is:

              

This head hack can output code only in the browser that you want to output. For example, in the example above, according to the browser to introduce different CSS files, depending on the browser to display different text and so on.

The hack of CSS

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.