Many of my friends don't know what kind of HACK is in CSS and how to use it. I have translated and pasted it here. This article is about the CSS hacking technology. Do not confuse it with the "filter" of Microsoft's proprietary CSS attribute. In the ideal world, correct CSS should work well in any browsers that support CSS. Unfortunately, we are not living in the ideal world, and browsers are full of bugs and inconsistencies. CSS developers must do their best to create a page that is consistent across browsers. By using bugs and unimplemented CSS, developers can apply different rules for different browsers. HACK and FILTER are powerful weapons for developers. It is important to understand common HACKS and how they work, but it is equally important to know when and when they are not used. CSS filter or hack is a code used to display or hide CSS labels based on the browser type and version number. Browsers have different interpretations of CSS behaviors, and their levels of support for W3C standards are also different. CSS filters are often used to achieve consistent layout appearances in multiple browsers, because some browsers cannot be rendered. The title of HACK is somewhat negative. In fact, it is a personal modification to the unofficial CSS code, misleading people to think there is a better way to achieve the purpose, but we do not actually have it, some people like to use patch to name it, so that people can know that this is a browser error.
BackslashThis hack utilizes an IE bug on the Mac platform. Comments ended with \ */are incorrectly disabled on IE Mac, so the statements to be ignored can be placed behind the comments. /* Ignore the following statement on IE Mac \ */selector {... styles...}/* ignore the end */
Box Model hack(For IE6 or earlier versions) it is called "Box Model hack" because it is often used to solve the box model error of IE. This hack can set different attributes for IE and other browsers. (In version 6, IE has fixed this box model error .) # Elem {width: [width in IE]; voice-family: "\" }\ ""; voice-family: inherit; width: [width in other browsers];} html> body # elem {width: [width in other browsers];} First, set voice-family to string "}", however, the parsing bug of IE will treat it as a backslash and add right brackets. Select voice-family because it does not affect the page style. The second rule, using html> body hack, is for the browser Opera7.0 before, it also has such a resolution error, but fortunately it supports sub-selector, so there is such a simple method.
Underline hack(Applicable to IE6 and earlier versions) IE 6 and earlier versions can recognize attributes with an underline prefix, while other browsers will ignore this attribute. Therefore, an attribute prefixed with an underscore or a hyphen becomes the proprietary property of IE6 and earlier browsers. # Elem {width: [W3C Model Width]; _ width: [BorderBox Model];} this hack uses invalid CSS and uses a browser bug, however, we have a valid CSS statement to do this, so this HACK is not recommended.
Asterisk (hack)(For versions earlier than IE7) except for underlines and hyphens, IE versions 7 and earlier can recognize attributes prefixed with non-letter characters, which are ignored by other browsers. # Elem {width: [W3C Model Width]; * width: [BorderBox Model];} this HACK is not recommended because it is the same as the preceding underline HACK.
Asterisk HTML hack(For IE4-6) HTML elements are the root element of W3C standard DOM (Document Object Model), but there is a mysterious parent element in IE 4 to 6 versions. A fully compatible browser ignores this * html selector, but the IE4-6 does. In this way, you can specify special rules for these versions of browsers. For example, this rule can specifically specify the size of text in the IE4-6, but does not work for other browsers. * Html p {font-size: 5em;} this HACK uses completely valid CSS.
Asterisk plus sign HACK(For IE7) Although IE7 does not recognize the previous * html hack, it uses a similar new hack. *: First-child + html p {font-size: 5em;} Or: * + html p {font-size: 5em;} This code is only applicable to IE7, it is not applicable to any other browsers. Note that this HACK only works normally in IE7 standard model and cannot be used in weird mode. This hack is also supported by the IE8 compatibility mode (equivalent to the standard mode of IE7. Like the star HTML hack, it also uses valid CSS.
Sub-Selector hack(Applicable to IE6 and earlier versions) IE6 and earlier versions do not support "sub-Selector" (>). We can use this to specify special rules for other browsers. For example, this rule turns paragraph text into blue in firefox, but not in versions earlier than IE7. Html> body p {color: blue;} Although IE7 has added support for sub-selectors, people have found that new hack can also exclude IE7. When an empty comment is followed by a sub-selector, IE7 does not recognize the following rules, just like earlier browsers. Html>/**/body p {color: blue ;}
Negative pseudo-class HACK(IE and non-IE can be distinguished) All versions of IE do not support CSS3: not () pseudo classes. There is a variant HACK used: root pseudo class, which is also not recognized by IE .. YourSelector {color: black;}/* value in IE */html: not ([dummy]). yourSelector {color: red;}/* values in Safari, Opera and Firefox */this type of negative selector accepts any type as a parameter, attribute, common, class or ID selector, or pseudo class. Then it applies the following attributes to all elements that do not match the syntax.
Body: empty hack(Applicable to Firefox 2.0 and earlier versions): empty pseudo-class, which was introduced in CSS3 and used to select elements without any content. However, Geck0 1.8.1 and later versions (Application versions in Firefox2.0.x and later) mistakenly select body: empty even if the body element contains content (this is generally the case ). In this way, we can provide specialized CSS rules to Firefox 2.0x and earlier versions. /* Make the p element not show */body: empty p {display: none;} this HACK uses valid CSS in Firefox 2.0.x and earlier versions.
! Important(Applicable to versions earlier than IE8) IE8 and earlier versions include and! It allows a value assignment with a higher priority. In IE7 and earlier versions, any string is accepted to replace important, and the value is processed normally, while other browsers ignore the value. /* In IE8 and earlier versions, the text is blue and the text is black in other browsers */body {color: black; color: blue! Ie;} Similarly, IE8 and earlier versions are accepted in! Important declares the non-alphanumeric characters behind it, while other browsers ignore it. Body {color: black; color: blue! Important !;} IE6 and earlier! Important brings about a problem. When the same attribute of the same element in the same block of code has different values, the result should be the second value to be first substituted, however, IE6 and earlier versions do not. /* Set the text to blue in IE6 and earlier versions */body {color: black! Important; color: blue;} all these HACK uses valid CSS.
Dynamic attributesIn versions 5 to 7, IE once supported a syntax suitable for dynamically changing CSS attributes, sometimes called CSS expressions. Dynamic attributes are usually mixed with other HACK to compensate for attributes not supported by earlier IE versions. Div {min-height: 300px;/* simulate min-height */_ height: expression (document. body. clientHeight <300? "300px": "auto ");}
Conditional commentsConditional comments are only recognized on Windows platform IE and supported starting from IE5. They can even be differentiated from versions 5.0, 5.5, and 6.0. Code: below are some "Conditional comments" to display the IE version you are using. If you cannot see it, you are not using IE: <p> <! -- [If IE]> According to the conditional comment this is Internet Explorer <br/> <! [Endif] --> <! -- [If IE 5]> According to the conditional comment this is Internet Explorer 5 <br/> <! [Endif] --> <! -- [If IE 5.0]> According to the conditional comment this is Internet Explorer 5.0 <br/> <! [Endif] --> <! -- [If IE 5.5]> According to the conditional comment this is Internet Explorer 5.5 <br/> <! [Endif] --> <! -- [If IE 6]> According to the conditional comment this is Internet Explorer 6 <br/> <! [Endif] --> <! -- [If IE 7]> According to the conditional comment this is Internet Explorer 7 <br/> <! [Endif] --> <! -- [If gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up <br/> <! [Endif] --> <! -- [If lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6 <br/> <! [Endif] --> <! -- [If lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5 <br/> <! [Endif] --> <! -- [If gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6 <br/> <! [Endif] --> </p> note that its syntax is-gt: higher than-lte: lower than or equal to: 1. Their basic structure is the same as that of HTML annotations (<! --> ). Therefore, all other browsers will ignore them as normal comments. 2. Programs in Windows IE can recognize this special <! -- [If IE]> syntax, process if and parse the content in this comment as normal webpage content. 3. Since conditional comments use the structure of HTML comments, they can only be contained in HTML files, not CSS files. You can place the entire <link> label in a conditional comment to point to a specified style sheet. <Link href = "all_browsers.css" rel = "stylesheet" type = "text/css"> <! -- [If IE]> <link href = "ie_only.css" rel = "stylesheet" type = "text/css"> <! [Endif] --> <! -- [If lt IE 7]> <link href = "ie_6_and_below.css" rel = "stylesheet" type = "text/css"> <! [Endif] --> <! -- [If! Lt IE 7]> <! [IGNORE [--> <! [IGNORE []> <link href = "recent.css" rel = "stylesheet" type = "text/css"> <! -- <! [Endif] --> <! -- [If! IE]> --> <link href = "not_ie.css" rel = "stylesheet" type = "text/css"> <! -- <! [Endif] -->
IE8 hackIE8 does not recognize css hack of "*" and "_", so we can use "\ 9" to differentiate IE versions. Color: # 0000FF \ 9;/* ie6, ie7, ie8 */* color: # FFFF00;/* ie7 */_ color: # FF0000;/* ie6 */
