CSS Compatibility IE, Chrome, Firefox and CSS Hack

Source: Internet
Author: User
Tags valid

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.