CSS Hack Collection _ Experience Exchange

Source: Internet
Author: User
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.

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.