CSS hack collection Summary

Source: Internet
Author: User

Shield ie browsers (that is, they are not displayed under IE)
*: Lang (zh) Select {Font: 12px! Important;}/* FF dedicated */
Select: Empty {Font: 12px! Important;}/* safari visible */
Here, select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.
Only IE7 Recognition

* + HTML {...}
This hack can be used only for IE7.
Identification of IE6 and IE6 or lower

* HTML {...}
Note that many landlords have written the hack of IE6. In fact, ie5.x can also identify this hack. Not recognized by other browsers.
Html/**/> body select {......}
This sentence serves the same purpose as the previous one.
Only IE6 is not recognized

Select {display/* IE6 not recognized */: none ;}
Here we mainly use CSS annotations to separate an attribute and a value, and the stream is prior to the colon.
Only IE6 and ie5 are not recognized

Select/**/{display/* IE6, ie5 does not recognize */: none ;}
The difference here is that a CSS comment is added between the separator and curly braces.
Only ie5 is not recognized

Select/* ie5 not recognized */{display: none ;}
This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized
Box Model Solution

Selct {width: ie5.x width; voice-family: "\" }\ ""; voice-family: Inherit; width: correct width ;}
The box model clearing method is not passed! Important. This should be clear.
Clear floating

Select: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating hack can be used to define the parent level.
Ellipsis (...)

Select {-o-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.
Only opera Recognition

@ Media all and (min-width: 0px) {select {......} }
Set the Opera Browser separately.
The above are some hack in CSS, which are used to solve the local compatibility problem. If you want to separate the compatibility content, try several filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import the required patch styles through conditions.

Ie5.x filter, only visible to ie5.x

@ Media tty {
I {content: "\";/* "" */} @ import 'ie5win.css ';/*";}
}/**/
Ie5/MAC filters are generally not required

[Copy to clipboard] [-] Code:
/*\*//*/
@ Import “ie5mac.css ";
/**/
If condition hack of IE

<! -[If IE]> only ie <! [Endif]->
All ie identifiable
<! -[If IE 5.0]> only IE 5.0 <! [Endif]->
Only ie5.0 can recognize
<! -[If gt ie 5.0]> only IE 5.0 + <! [Endif]->
Both ie5.0 and ie5.5 can be identified.
<! -[If lt IE 6]> only IE 6-<! [Endif]->
Only IE6 can recognize
<! -[If gte ie 6]> only IE 6/+ <! [Endif]->
Ie5.x under IE6 and IE6 can be recognized
<! -[If lte ie 7]> only IE 7/-<! [Endif]->
Only IE7 can recognize
The above content is certainly not comprehensive. You are welcome to join me in summarizing these skills to facilitate future work queries. I would also like to thank those who have developed these hack.

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.