Condition hack
Grammar:
<!-- [if <keywords>? IE <version>?] >html code block <! [EndIf] -
<keywords>
The IF Condition contains 6 options: whether, greater than, greater than or equal to, less than, less than or equal to, non-specified version
-
Whether:
-
Specifies whether IE or IE is a version. Keywords: empty
-
Greater than:
-
Select the IE version that is larger than the specified version. Keywords: gt (greater than)
-
Greater than or equal to:
-
Select the IE version that is greater than or equal to the specified version. Keywords: GTE (greater than or equal)
-
Less than:
-
Select an IE version that is less than the specified version. Keyword: lt (less than)
-
Less than or equal to:
-
Select the IE version that is less than or equal to the specified version. Keywords: LTE (less than or equal)
-
Non-specified version:
-
selects all IE versions except the specified version. Keywords: !
<version>
The current version of the commonly used IE is 6.0 and above, it is recommended to ignore the lower version as appropriate, and devote energy to providing a better experience for users who use advanced browsers.
Used to select different versions of IE browser and IE
- If condition hack is HTML level (contains but not only CSS hack, can choose any HTML code block)
<!-- [If ie]><p> you will not see my figure in non-IE </p><! [EndIf] -
Sample Demo:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8" /><title>If condition HACK_CSS reference manual _web front-end Development Reference manual series</title><style>H1{margin:10px 0;font-size:16px;}span{Display:None;}. Not-ie{Display:inline;}</style><!--[if Ie]><style>.ie{display:inline;}. Not-ie{display:none;} </style><! [EndIf] -<!--[If IE 5]><style>.ie5{display:inline;} </style><! [EndIf] -<!--[If IE 6]><style>.ie6{display:inline;} </style><! [EndIf] -<!--[If IE 7]><style>.ie7{display:inline;} </style><! [EndIf] -<!--[If IE 8]><style>.ie8{display:inline;} </style><! [EndIf] -<!--[If IE 9]><style>.ie9{display:inline;} </style><! [EndIf] -</Head><Body><Div>you are using<spanclass= "Not-ie">Non-IE</span> <spanclass= "ie">Ie</span> <spanclass= "IE5">5</span> <spanclass= "IE6">6</span> <spanclass= "IE7">7</span> <spanclass= "IE8">8</span> <spanclass= "IE9">9</span>Browser</Div></Body></HTML>
CSS Properties HACK
Grammar:
selector{<hack>property:value<hack>?;}
_:
-
Select IE6 and below. The Connector (middle dash) (-) can also be used, in order to avoid confusion with some of the underlined properties, it is more appropriate to use an underscore (_).
-
*:
-
Select IE7 and below. such as: (+) and (#) can be used, but the industry to (*) the recognition of higher
-
\9:
-
Select ie6+
-
:
-
Choose ie8+ and Opera
-
[;p Roperty:value;]; :
-
Select WebKit Core Browser (Chrome,safari). IE7 and below can also be identified. 3 semicolons inside and outside the brackets must be preserved, before the first semicolon can be any rule or any number of rules
- [; color: #f00;]; with [color: #f00; color: #f00;]; and [Margin:0;padding:0;color: #f00;]; is equivalent. The last rule in brackets is always in effect, so the first one is usually the simplest to use.
Choose a different browser and version
Example:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8" /><title></title><style>H1{margin:10px 0;font-size:16px;}. Test{Color:#c30; /*For Firefox*/[; color:#ddd;]; /*For WebKit (Chrome and Safari)*/Color:#090; /*For Opera*/Color:#00f \9; /*For ie8+*/*color:#f00; /*For IE7*/_color:#ff0; /*For IE6*/}</style></Head><Body><Divclass= "Test">Look at my colors under a different browser.</Div></Body></HTML>
Front-end learning--html&css--conditional hack and attribute hack