CSS Hack Collection _ Experience Exchange

Screen IE browser (ie do not show)
*:lang (en) Select {font:12px!important}/*ff Dedicated * *
Select:empty {font:12px!important}/*safari Visible * *
Here the Select is a selector and is replaced according to the situation. The second sentence is unique to the Safari browser on the Mac.
Only IE7 recognition

*+html {...}
This hack can be used when faced with the need to do IE7 style only.
IE6 and IE6 following identification

* HTML {...}
This place should pay special attention to a lot of landlords have written is IE6 hack actually ie5.x also can recognize this hack. Not recognized by other browsers.
html/**/>body Select {...}
This sentence is the same as the previous one.
Only IE6 not recognized

The Select {display/*ie6 does not recognize */:none;}
This is essentially a CSS annotation that separates a property from a value, which is released before the colon.
Only IE6 and IE5 not recognized

select/**/{display/*IE6,IE5 does not recognize */:none;}
This differs from the preceding sentence by having a CSS annotation between the selector and the curly brace.
Only IE5 not recognized

SELECT/*IE5 does not recognize/{Display:none}
This sentence is a comment that removes the attribute area from the previous sentence. Only IE5 not recognized
Box Model Solution

SELCT {width:ie5.x width; voice-family: "}\" "; Voice-family:inherit; Width: correct widths;}
The Purge 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 height of the parent can not fully wrap the entire child, then use this clear floating hack to define the parent, then this problem can be solved.
truncated ellipsis

Select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
This is the more than the length of their own to intercept the more parts of the text, and to the end of the ellipsis, a good technique. But Firefox doesn't support it at the moment.
Only Opera recognizes

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

ie5.x filter, only ie5.x visible

@media TTY {
I{content: "\";/* ""/}} @import ' Ie5win.css '; /*”;}
}/* */
Ie5/mac filters, usually not.

[Copy to Clipboard] [ - ] CODE:
/*\*//*/
@import "Ie5mac.css";
/**/
The IF condition hack ie

<!–[if ie]> only IE <! [endif]–>
All IE can be identified
<!–[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 shifting IE5.5 can be identified
<!–[if lt ie 6]> only ie 6-<! [endif]–>
Only IE6 can be recognized
<!–[if GTE ie 6]> only ie 6/+ <! [endif]–>
IE6 and the ie5.x below IE6 can be identified
<!–[if LTE IE 7]> only IE 7/-<! [endif]–>
Only IE7 can be recognized
The above is certainly not comprehensive, welcome to join me to put these skills together, for the future work of the query to provide a convenient, and here to thank those who have studied these hack people.