CSS Hack Summary Quick check manual browser compatibility must be _ experience Exchange

Block IE browser (ie not shown)
Copy CodeThe code is as follows:
*: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 and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.

IE7 Identification only
Copy CodeThe code is as follows:
*+html {...}
This hack can be used when faced with the need to make a style for IE7 only.

IE6 and IE6 following identification
Copy CodeThe code is as follows:
* HTML {...}
This place should pay special attention to a lot of landlords have written IE6 hack actually 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
Copy CodeThe code is as follows:
Select {Display/*IE6 does not recognize */:none;}
The main point here is to separate a property and value from the CSS annotation, which flows in front of the colon.

Only IE6 and IE5 are not recognized
Copy CodeThe code is as follows:
select/**/{display/*IE6,IE5 does not recognize */:none;}
The difference between this and the above sentence is that there is a CSS comment between the selector and the curly brace.

Only IE5 not recognized
Copy CodeThe code is as follows:
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
Copy CodeThe code is as follows:
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
Copy CodeThe code is as follows:
Select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the child is floating, then the height of the parent can not completely wrap the entire child, then use this to clear the floating hack to do a definition of the parent, then you can solve the problem.

Truncation character ellipsis
Copy CodeThe code is as follows:
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
Copy CodeThe code is as follows:
@media all and (min-width:0px) {select {...}}
Make a separate setting for 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
Copy CodeThe code is as follows:
@media TTY {
I{content: "\";/* "" */}} @import ' Ie5win.css '; /*";}
}/* */

Ie5/mac filters, generally no need
Copy CodeThe code is as follows:
/*\*//*/
@import "Ie5mac.css";
/**/

ie if condition hack
Copy CodeThe code is as follows:

All IE is recognizable

Only IE5.0 can identify

IE5.0 shifting IE5.5 can be identified

Only IE6 recognizable

IE6 and ie5.x below IE6 are recognizable


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.

