You are welcome to join me in combining these tips to provide a convenient way to work in the future, and thank those who have studied these CSS hack.
-
-
Screen IE browser (ie do not show)
-
-
*:lang (en)
select {
font:12px !important}/*ff, OP visible, special reminder: Due to the recent upgrade of opera, this sentence is only recognized by FF * /
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 and IE5.0 can be identified
-
-
*+html
Select {
...}
This hack can be used when faced with the need to make styles only for IE7 and IE5.0.
-
-
Only IE7 can recognize
-
-
*+html
Select {
...! important;}
This hack can be used when faced with the need to do IE7 style only.
-
-
IE6 and IE6 following identification
-
-
* HTML
Select {
...}
This place should pay special attention to many blogs 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, shielding IE6
-
-
Select {
display /* Shield ie6*/:
none;}
This is mainly a CSS annotation to separate a property and a value, note before the colon.
-
-
Only IE6 and IE5 are not recognized, shielding IE6 and IE5
-
-
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.
do not shield IE5.5
-
-
Only IE5 not recognized, shielding IE5
-
-
Select/*IE5 does not recognize */{
...}
This sentence is a comment that removes the attribute area from the previous sentence. Only IE5 are not recognized, IE5.5 can be identified.
-
-
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 filter, generally no need
-
/*\*//*/
@import "
ie5mac.css ";
/**/
-
ie if condition hack
-
<!--[if ie]>
only IE <! [endif]-->
All IE identifiable
<!--[if IE 5.0]>
only IE 5.0 <![ Endif]-->
Only IE5.0 can be identified
<!--[if GT IE 5.0]>
only ie 5.0+ <![ Endif]-->
IE5.0 IE5.5 can be identified
<!--[if LT ie 6]>
only ie 6- <![ Endif]-->
Only IE6 identifiable
<!--[if GTE IE 6]>
only ie 6/+ <![ Endif]-->
IE6 and ie5.x below IE6 can be identified
<!--[if LTE IE 7]>
only ie 7/- <![ Endif]-->
Only IE7 identifiable
The above may not be 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 CSS hack authors.
