Original Author:Micron blog
I used to write an article about CSS hack.ArticleBut I recently looked back and found that my understanding was not profound enough and my summary was not concise. So I will try again today to write a new article. Common CSS
Hack is as follows (I only tested ie & FF & chrome ).
Hack list (all tested by the author and 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.52css.com % 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: # ff0000 \ 9;/* 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, with a simple lineCodeAllows 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
