Use CSS hack to set. CSS hack aim is to make your CSS code compatible with different browsers. Of course, we can in turn use CSS hack to write custom CSS effects different for different versions of the browser.
1. Principle
Because different browsers support different analytical results and CSS, but also because the priority of relations in the CSS. We can come to write different CSS for different browsers based on this.
Hack CSS are basically three kinds forms, Hack internal CSS class, and Hack selector HTML reference head (if IE) Hack, CSS Hack Hack mainly for internal class: for example to identify IE6 underscore "_" and the asterisk "*" , IE7 can identify an asterisk "*", but does not recognize the underscore "_", and both firefox not know. and many more
Selector Hack: recognize such IE6 * html .class {}, IE7 recognize * + html .class {} or *: first-child + html .class {}. and many more
HTML head reference (if IE) Hack: for all IE: <-! [If IE]> <[endif]! ->, for IE6 and below <- - your code!>: <! - [if lt IE 7]> <-! your code -> <[endif] -!>, not only for this type of CSS Hack into force, all the code written inside the statement in judge will take effect.
Writing order, the general is a strong ability to identify the browser's CSS written on the back. Here's how to write in more detail, which said.
2, commonly used CSS hack way
(1) a mode annotation process conditions
IE only apply
<!--[if IE]>
This text is only in IE browser display
<![endif]-->
Only take effect in IE6
<!--[if IE 6]>
This text only appears in IE6 browser
<![endif]-->
Only take effect in IE6 or later
<!--[if gte IE 6]>
This text only (including) version in more than IE6 IE browser display
<![endif]-->
Not only effective on IE8
<!--[if ! IE 8]>
This text is displayed in a non IE8 browser
<![endif]-->
Non- IE browser to take effect
<!--[if !IE]>
This text is displayed only non-IE browsers
<![endif]-->
(2) Method manner within the second category attribute prefix
Property law is to add the prefix number prefix hack only certain browsers to recognize before CSS style property name, in order to achieve the desired page to show the effect.
Each version of IE browser CSS hack table
Description: In the standard mode,
"-" minus sign is IE6-specific hack
"\ 9" IE6 / IE7 / IE8 / IE9 / IE10 take effect
"\ 0" IE8 / IE9 / IE10 take effect, a hack IE8 / 9/10's
"\ 9 \ 0" only for IE9 / IE10 into force, is hack IE9 / 10's
(3) CSS hack way 3: Select prefix Act
The selector prefix for the law is inconsistent with the performance of some of the pages or require special treatment of the browser, plus some prefixes only certain browsers to recognize before CSS selectors were hack.
The most common is
* Html * prefix only IE6 commencement * + html * + IE7 prefix only take effect @media screen \ 9 {...} only IE6 / 7 commencement @media \ 0screen {body {background: red;}} only IE8 effective @media \ 0screen \, screen \ 9 {body {background: blue;}} only IE6 / 7/8 effective @media screen \ 0 {body {background: green;}} @ valid only for IE8 / 9/10 media screen and (min-width: 0 \ 0) {body {background: gray;}} only IE9 / 10 effectively @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body {background: orange;}} is valid only for the like IE10
3, practical application
For example, to distinguish between IE6 and firefox both browsers, you can write:
div{background:green;/*forfirefox*/*background:red;/*forIE6*/(bothIE6&&IE7)}
I saw in IE6 is red, green is seen in firefox.
explain:
What the above css in firefox, it is not recognized with an asterisk behind that thing is, so it will be filtered out, ignored, the results obtained by parsing is: div {background: green}, then of course this div the background is green.
In IE6 it, it can be identified two background, it parses the result is obtained: div {background: green; * background: red;}, then according to priority, in the back of the red high priority, then of course, the background color of the div is red.
4, the width attribute IE6,7,8 separately defined code is as follows
|
1
2
3
4
5
|
div{
width
:
200px
;
/*所有浏览器都能识别 包括IE7*/
-
width
:
180px
;
/*只有IE6识别，识别后会覆盖通用width的设置，达到IE6单独设置的效果*/
-
width
:
180px
\
0
;
/*IE8以上的浏览器识别，识别后会覆盖通用width的设置，达到IE8单独设置的效果*/
}
|