CSS3 's advanced -4 Css Hack

First, CSS Hack

Standard mode and promiscuous mode

-Before IE6, there is no compatibility between different browsers

-IE6 After the browser manufacturers began to seek standard unification, but still allow forward compatibility, resulting in a different mode of operation

-Browser run mode can be divided into:

-Promiscuous modes (Quirks mode)

-Standard Mode

-Quasi-standard mode (almost)

-Different modes, the browser to CSS (especially box model) and JS parsing effect will produce different

-Other browsers will automatically choose the mode according to DOCTYPE, IE can also manually select the operating mode

-Trigger Promiscuous Mode

-Do not declare DOCTYPE

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/E3/wKiom1byHNKS0Z5BAAA5VdeKiu0055.png "title=" Web.png "alt=" Wkiom1byhnks0z5baaa5vdekiu0055.png "/>

-Trigger quasi-standard mode (follow standard, still compatible with some non-standard code)

-<!--HTML 4.01 Transitions--

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose . DTD ">

-<!--HTML 4.01 Frameset---

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "Http://www.w3.org/TR/html4/frame Set.dtd ">

-<!--XHTML 1.0 Transition--

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd ">

-<!--XHTML 1.0 Framework Set--

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-frameset.dtd ">

-Trigger Standard mode (standard, non-standard code not allowed)

-<!--HTML 4.01 Strict--

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"

"Http://www.w3.org/TR/html4/strict.dtd" >

-<!--XHTML 1.0 Strict--

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "http://www . w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd ">

-<!--HTML 5--

<! DOCTYPE html>

CSS Hack Concepts

-Different browser types and versions will cause CSS effects to vary

-Browsers from different vendors, such as IE, Safari, FireFox, Chrome, opera, etc.

-Different versions of the same vendor's browser, such as IE6, IE7

-Need to write different CSS for different browsers

-Enables browser compatibility

-You can also customize different CSS effects for different versions of your browser

Browser compatibility

-Support for CSS and parsing results based on different browsers

-Margin and padding

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7D/E4/wKiom1byLqyR5yXiAABAw6fYWq8572.png "title=" Web.png "alt=" Wkiom1bylqyr5yxiaabaw6fywq8572.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/E4/wKiom1byLoiRpT2fAABSqlLjv5Q247.png "title=" Web.png "alt=" wkiom1byloirpt2faabsqlljv5q247.png "/> 650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M02/ 7d/e4/wkiom1byltbsumhjaabklokxuwi758.png "title=" Web.png "alt=" Wkiom1byltbsumhjaabklokxuwi758.png "/>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/E1/wKioL1byL4mxn916AAAlgEHueX0165.png "title=" Web.png "alt=" Wkiol1byl4mxn916aaalgehuex0165.png "/>

-Center Layout

-In the low version of IE, for the parent element with Text-align:center;

-Other, the child element needs margin:0 auto;

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7D/E1/wKioL1byL-LwOMwEAADTG4pu7mw341.png "title=" Web.png "alt=" Wkiol1byl-lwomweaadtg4pu7mw341.png "/>

-Element Height and content

-the height of the element contains at least the content in IE lower version

-Other, content exceeds height, display

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E4/wKiom1byMVvDxlxaAADAVCqGues756.png "title=" Web.png "alt=" Wkiom1bymvvdxlxaaadavcqgues756.png "/>

-The parent element needs to set the border or margin when the child element sets the upper margin

-HTML

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/E4/wKiom1byM4yhg_TQAAB8fvPdwtE615.png "title=" Web.png "alt=" Wkiom1bym4yhg_tqaab8fvpdwte615.png "/>

-CSS

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7D/E4/wKiom1byM6jhWklfAACV6GF-_rI178.png "title=" Web.png "alt=" Wkiom1bym6jhwklfaacv6gf-_ri178.png "/>

-Show Results

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/E4/wKiom1byM7ux9YpjAABB_3XCxEo137.png "title=" Web.png "alt=" Wkiom1bym7ux9ypjaabb_3xcxeo137.png "/>

-Other browsers

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/E4/wKiom1byM-nCu3uNAACCi09cV8U933.png "title=" Web.png "alt=" Wkiom1bym-ncu3unaacci09cv8u933.png "/>

-Set the border of the parent element (can be set to transparent)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/E4/wKiom1byNBWDrf8aAACqWJRx3JI952.png "title=" Web.png "alt=" Wkiom1bynbwdrf8aaacqwjrx3ji952.png "/>

-or set the inner margin of the parent element, overriding the outer border of the child element

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/E4/wKiom1byNJeynEF-AAD-kUMFN8g123.png "title=" Web.png "alt=" Wkiom1bynjeynef-aad-kumfn8g123.png "/>

CSS Hack principle

-Mainly have

-CSS class Internal Hack

-Selector Hack

-HTML Header Reference Hack

CSS class Internal Hack

-Attribute prefixes

-Add some hack prefixes that are only recognized by a specific browser before CSS style property names

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/E5/wKiom1byQP2yuHuqAAD9y1u_iFA447.png "title=" Web.png "alt=" Wkiom1byqp2yuhuqaad9y1u_ifa447.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/E2/wKioL1byQxbxzmg1AAEj7o8SuIc173.png "title=" Web.png "alt=" Wkiol1byqxbxzmg1aaej7o8suic173.png "/>

Selector hack

-Selector Prefix

-precede CSS selectors with prefixes that are only recognized by certain specific browsers

-* Prefix: IE6, such as *html

-*+ prefix: IE7, such as *+html

-@media screen\9{...}, only valid for IE6/7

- ...

HTML Header Reference Hack

-IE Conditional comment

-The basic structure of the conditional comment is the same as the HTML comment (<!-->)

-IE determines whether the content in the conditional comment is parsed according to the IF condition

-Gt:greater than, select the condition version above, do not include the conditional version

-Lt:less than, select the following version of the condition version, do not include the conditional version

-Gte:greater than or equal, select a version above the condition version, including the conditional version

-Lte:less than or equal, select the following version of the condition version, including the conditional version

-!: Select all versions except the condition version, regardless of high or low

-Effective only under IE

-<!--[if ie]> this text is only displayed in IE browser <! [endif]-->

-Effective only under IE6

-<!--[if IE 6]> this text is only displayed in IE6 browser <! [endif]-->

-only valid for versions above IE6

-<!--[if IE GTE 6]> This text is displayed only at IE6 above (including) version of IE browser <! [endif]-->

-not valid only on IE8

-<!--[if! IE 8]> This text in non-IE8 browser display <! [endif]-->

-Non-IE browser effective

-<!--[if! Ie]> This text is only displayed in non-IE browser <! [endif]-->

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/E6/wKiom1bySNLBkZMzAAFmOPqnxJY155.png "title=" Web.png "alt=" Wkiom1bysnlbkzmzaafmopqnxjy155.png "/>

Summary: The content of this chapter mainly introduces the Css Hack

This article from the "Technical Exchange" blog, declined reprint!

CSS3 's advanced -4 Css Hack