Home > Article > Web Front-end > CSS that works for specific browsers: IE Chrome Firefox CSS Hack_html/css_WEB-ITnose
CSS that works for specific browsers: IE Chrome Firefox CSS Hack_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:191085browse
CSSHack for Firefox
A CSS Hack that is only applied on Firefox. Although this is very rare, you may encounter it sometimes:
@-moz-document url-prefix() { .cssSelector { font-size: 14px; }} CSSHack for Chrome
A CSS Hack that is only applied on Chrome. This situation has not been encountered yet (the reason for using Chrome as a development browser?), Be prepared.
@media screen and (-webkit-min-device-pixel-ratio:0) { #test1{color:red;}} CSS Hack for IE6/7/8/9
A CSS Hack that is only applied on IE. This situation is encountered almost often. A common one is used here. Method, the situation is complicated, you need to divide the version first:
Attach an IE version of class to the body
Write Hack CSS together with other CSS files.
IE9 does not add Hack; IE6, IE7, IE8 add the prefix of ie, IE6 adds an additional prefix of ie6 Hack (most hacks written for ie7/8 will be used by IE6)
<!--[if lt IE 7 ]><body class="ie ie6"><![endif]--><!--[if IE 7]><body class="ie"><![endif]--><!--[if IE 8]><body class="ie"><![endif]-->
Attach a new CSS file to IE
Add one more for IE7/8 and two more for IE6. Just let IE decorate more things and don’t pollute other CSS files
<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="css/show_ie.css"><![endif]--><!--[if lt IE 7]><link type="text/css" rel="stylesheet" href="css/show_ie6.css"><![endif]-->
Note* lt means less than; that is, "ifless than IE9" = "if lt IE 9", there are several others, but they are less used