Hack List (all tested by the author, in standard mode, hybrid mode is rarely used, so it is not tested ):
The pink part is the property hack, and the yellow part is the selector hack, which can be used in combination. In addition, Firefox and Chrome also have their proprietary hack.
Example:
Firefox:
@-Moz-document url-prefix ()/* when writing the outer part of the selector (only available here): Firefox only */
Chrome:
@ Media screen and (-webkit-min-device-pixel-ratio: 0)/* when writing the outer part of the selector (only this part can be written): Chrome only */
Example-before the selector:
@-Moz-document url-prefix ()/* Firefox */
{
Body
{
Background-color: pink;
}
}
Note:
The browser parses css from the front to the back and uses the last style declaration.
I still don't know how to differentiate them. Well, let's look at an example:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> difference IE6, IE7, IE8, FireFox CSS hack-http://www.111cn.net % 3c/title>
<Style type = "text/css">
<! --
# Test, # note {
Margin: 0 auto;
Text-align: center;
}
# Test {
Width: 200px;
Height: 30px;
Border: 1px solid #000000;
Color: # fff;
Line-height: 30px;
}
. Color {
Background-color: # CC00FF;/* all browsers are purple */
Background-color: # FF00009;/* IE6, IE7, and IE8 are displayed in red */
* Background-color: # 0066FF;/* IE6 and IE7 change to blue */
_ Background-color: #009933;/* IE6 turns green */
}
-->
</Style>
</Head>
<Body>
<Div id = "test" class = "color"> test box www.mycsu.net </div>
<Div id = "note">
<Strong style = "color: #009933"> IE6 </strong>
<Strong style = "color: # 0066FF"> IE7 </strong>
<Strong style = "color: # FF0000"> IE8 </strong>
<Strong style = "color: # CC00FF"> FireFox </strong>
</Div>
</Body>
</Html>
Bytes ---------------------------------------------------------------------------------------------------
Background: red;/* Effective for FF Opera and Safari */
# Background: blue;/* valid for IE6 and IE7 */
_ Background: green;/* only valid for IE6 */
/*/Background: orange; * // ** only valid for IE8 **/
! Important/* FF, IE7 valid */
*/* IE is valid */
========================================================== ================================
IE8 is compatible with IE7. A simple line of code allows IE8 to automatically call the rendering mode of IE7.
You only need to add the following HTTP meta-tag to the page:
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>
As long as IE8 reads this label, it automatically starts the IE7 compatibility mode to ensure the full display of the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
