Firefox, Google, ie9, IE8, IE7, IE6, and CSS define the sequence

Source: Internet
Author: User

Body {
Background-color: black;/* Firefox + Google */
Background-color: Red \ 9 \ 0;/* ie9 */
Background-color: Blue \ 0;/* IE8 */
* Background-color: red;/* IE7, IE6 */
+ Background-color: Navy;/* IE7 */
_ Background-color: green;/* IE6 */
}

Note:Ie9Support \ 9 \ 0, do not have spaces in the middle, written as background-color: Red \ 9 \ 0; not recognized. Must be background-color: Red \ 9 \ 0;

IE8\ 0 is supported, and no spaces are in the middle.

IE6, IE7All support *,

Special support for IE6Underline _:_ Background-color: green;

IE7 supports the plus sign +:+ Background-color: green;


Define the sequence: Firefox Google> ie9> IE8> IE7> IE6;

The above is a CSS attribute for an element. If you want to be fully compatible with a piece of CSSCodeTo write
/* Firefox, Google browser */
# Menu {
Width: 1005px; Height: 30px; Background: red; margin: 0px auto;
}
/* IE 6 browser */
* Html # menu {
Width: 1005px; Height: 30px; Background: Navy; margin: 0px auto;
}
/* IE 7 browser */
* + Html # menu {
Width: 1005px; Height: 30px; Background: Gray; margin: 0px auto;
}

/* IE 7 browser */
*: First-Child + html # menu {
Width: 1005px; Height: 30px; Background: Gray; margin: 0px auto;
}

* + Html # menu and *: First-Child + html # menu of IE7 have the same effect. I don't know the difference. I hope some netizens can give me some comments.

Note: IE6 and 7 Support *. IE7 supports + numbers.

Of course, if there are many different CSS settings, you can write CSS styles for different browsers and load CSS styles based on different browsers in the browser header.

First, the general style is loaded by default.
<LINK rel = "stylesheet" type = "text/CSS" href = "/style.css"/>
<! -- [If IE 6]>
<LINK rel = "stylesheet" type = "text/CSS" href = "/ie6.css"/>
<! [Endif] -->
<! -- [If IE 7]>
<LINK rel = "stylesheet" type = "text/CSS" href = "/ie7.css"/>
<! [Endif] -->

There are other browsers in the following format:

<! -- [If! IE]> <! --> All except Ie can be recognized <! -- <! [Endif] -->
<! -- [If IE]> all IE identifiable <! [Endif] -->
<! -- [If IE 6]> only IE6 <! [Endif] -->
<! -- [If lt IE 6]> IE6 and IE6 <! [Endif] -->
<! -- [If gte ie 6]> IE6 and IE6 <! [Endif] -->
<! -- [If IE 7]> only IE7 <! [Endif] -->
<! -- [If lt IE 7]> IE7 and IE7 <! [Endif] -->
<! -- [If gte ie 7]> IE7 and IE7 <! [Endif] -->
<! -- [If IE 8]> only IE8 <! [Endif] -->
<! -- [If IE 9]> ie9 only <! [Endif] -->

 

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.