CSS Hack Summary Quick check manual browser compatibility must be

Source: Internet
Author: User
Block IE browser (ie not shown)

*:lang (ZH) select {font:12px!important;}/*ff visible, special statement: Due to the latest opera update, this sentence has now become FF's dedicated hack*/select:empty {font:12px! important;} /*safari Visible */Here Select is the selector, depending on the situation to replace. The second sentence is unique to the Safari browser on your Mac.

IE7 Identification only

*+html {...} This hack can be used when faced with the need to style only for IE7.

IE6 and IE6 following identification

* HTML {...} This place has to pay special attention to the fact that many landlords have written IE6 hack ie5.x can also recognize this hack. Other browsers are not recognized. html/**/>body Select {...} This sentence has the same effect as the previous sentence.

Only IE6 not recognized

Select {Display/*IE6 does not recognize */:none;} This is primarily a property and value that is separated by a CSS comment, which flows in front of the colon.

Only IE6 and IE5 are not recognized

select/**/{display/*IE6,IE5 does not recognize */:none;} Unlike the above sentence, there is a CSS comment between the selector and the curly brace.

Only IE5 not recognized

SELECT/*IE5 does not recognize */{display:none;} This sentence removes the comment from the attribute area in the previous sentence. Only IE5 does not recognize

Box Model Solving method

SELCT {width:ie5.x width; voice-family: "\"}\ ""; Voice-family:inherit; Width: correct widths;} The cleaning method of the box model is not handled by!important. This should be clear.

Clear floating

Select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} in Firefox, when the children are floating, Then the parent's height can not completely wrap the entire child, then use this to clear the floating hack to do a definition of the parent, then it is possible to solve the problem.

Truncation character ellipsis

Select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} This is the more out of the length of the self-cut off the portion of the text, and end with an ellipsis, a very good technology. Only Firefox does not support it at this time.

Only Opera recognizes

@media all and (min-width:0px) {select {...}} to make separate settings for the Opera browser. The above are some of the CSS hack, these are used to solve the local compatibility problem, if you want to separate the compatibility of the content, may wish to try the following several filters. Some of these filters are written in CSS to import special styles through filters, as well as the use of conditions to link or import the required patch styles in HTML.

ie5.x filter, only ie5.x visible

@media TTY {i{content: "\";/* "" */}} @import ' Ie5win.css '; /*";} }/* */

Ie5/mac filters, generally no need

/*\*//*/@import "Ie5mac.css"; /**/

ie if condition hack

<!--[if ie]> only IE <! [endif]--> all IE recognizable <!--[if IE 5.0]> only IE 5.0 <! [endif]--> only IE5.0 can identify <!--[if GT ie 5.0]> only ie 5.0+ <! [endif]--> IE5.0 Replacement IE5.5 can be identified <!--[if LT ie 6]> only ie 6-<! [endif]--> only IE6 recognizable <!--[if GTE ie 6]> only ie 6/+ <! [endif]--> IE6 and IE6 below ie5.x are recognized <!--[if LTE IE 7]> only IE 7/-<! [endif]-->

Only IE7 can identify the above content may not be comprehensive, welcome you and I together these skills are summed up, for the future work of the query to provide a convenient, while here to thank those who study these hack authors.


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.