CSS compatibility (ie and Firefox) Tips 2

1. Div Center

If the DIV sets margin-left and margin-Right to auto, it is already centered. If IE is not, you need to set the body to center. First, define text-algin: center in the parent element; this means that the content in the parent element is centered.

2. Border and background of the Link (a tag)

Add the border and background color to the link. Set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

3. Problems with the hover style after hyperlink access

Click to access the hyperlink style is not with Hover and active, many people should have encountered this problem, the solution is to change the CSS attribute arrangement order: L-V-H-A

Code:

<Style type = "text/CSS">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>

4. cursor

Cursor: pointer can display the cursor finger shape in IE ff at the same time, hand only ie Can

5. UL's padding and margin

UL labels have padding values by default in FF, while only margin has default values in IE. Therefore, UL {margin: 0; padding: 0;} is defined first ;} most problems can be solved.

6. Form tag

In IE, this label will automatically margin some margins, while in FF, margin is 0. Therefore, if you want to display consistency, it is best to specify margin and padding in CSS, for the above two problems, I usually use this style ul in CSS first, FORM {margin: 0; padding: 0 ;}to define it as dead, so it won't be a headache in the future.

7. Inconsistency of Box Model Interpretation

The box model interpretation in ff and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px;} note that the order of the two margin must not be reversed. The attribute IE of important cannot be identified, but can be recognized by other browsers. So in IE, it is actually explained as follows:

If Div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: xx px! Important; # box {width: 600px; // For ie6.0-W/idth: 500px; // for FF + ie6.0}
# Box {width: 600px! Important // for FF width: 600px; // for FF + ie6.0 width/**/: 500px; // For ie6.0 -}

8. Attribute selector (this is incompatible and is a bug in hiding CSS)

P [ID] {} Div [ID] {}

 

This is hidden for versions earlier than ie6.0 and ie6.0, and works with ff and opera. there is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.

9. The most cruel means -! Important

If there is no way to solve some detailed problems, you can use this technique. FF "! Important will automatically give priority to resolution, but IE will ignore it.

. Tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}

It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above

10. Questions about default values of IE and FF

Maybe you have been complaining about why you want to write different CSS for IE and ff. Why is it so troublesome for IE? Then write CSS while cursing the hateful M $ IE. in fact, for the standard support of CSS, ie is not as bad as we think. The key is that the default values of IE and FF are different. I have mastered this technique, you will find that writing CSS compatible with ff and IE is not that difficult. You may not need to write simple CSS "! Important.

We all know that when a browser displays a webpage, it will decide how to display it based on the CSS style sheet of the webpage. However, we may not describe all the elements in the style sheet, of course, there is no need to do this, so for those attributes that are not described, the browser will use the built-in default mode for display, such as text, if you do not specify the color in CSS, the browser uses black or system color to display the background of the Div or other elements. If it is not specified in CSS, the browser sets it to white or transparent, and so on. So the root cause of the difference between FF and IE display is that their default display is different, and how to display this default style? I know there are no corresponding standards in W3 to define, so don't blame ie for this.

11. why can't the FF text support the height of the container?

Containers with fixed height values in the standard browser won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the Min-Height: 200px setting for height. Here, we can define this to take care of IE6 that does not know Min-height:

{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}

12. How to enable automatic line feed for continuous long fields in Firefox

As we all know, you can directly use Word-wrap: Break-word in IE. In ff, we use JS inserts.
Skills to solve

<Style type = "text/CSS">
<! --
Div {
Width: 300px;
Word-wrap: Break-word;
Border: 1px solid red;
}
-->
</Style>

<Div id = "FF"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

<SCR limit PT Type = "text/merge Cr limit PT">
/* <! [CDATA [*/
Function tobreakword (El, intlen ){
VaR export bj = Document. getelementbyid (EL );
VaR strcontent = obj. innerhtml;
VaR strtemp = "";
While (strcontent. length> intlen ){
Strtemp + = strcontent. substr (0, intlen) +"
";
Strcontent = strcontent. substr (intlen, strcontent. Length );
}
Strtemp + ="
"+ Strcontent;
OBJ. innerhtml = strtemp;
}
If (document. getelementbyid &&! Document. All) tobreakword ("FF", 37 );
/*]> */
</Scr platinum Pt>

13. Why is the container width and FF interpretation different under IE6?

<? XML version = "1.0" encoding = "gb2312"?>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
Div {
Cursor: pointer;
Width: 200px;
Height: 200px;
Border: 10px solid red
}
-->
</Style>
<Div export nclick = "alert (this. offsetwidth)"> make Firefox compatible with IE </div>

The difference is whether the overall width of the container includes the Border width. Here, IE6 is interpreted as 200px, while FF is interpreted as 220px, so how did it cause the problem? If you remove the XML at the top of the container, you will find that the original problem exists. The declaration at the top triggers the qurks mode of IE. For more information about qurks mode and standards mode, see related materials.

IE6, IE7, FF

When ie7.0 came out, there were new problems with CSS support. More browsers, network BPX;/* For IE7 & IE6 */
_ Height: 20px;/* For IE6 */

Pay attention to the sequence.

This also belongs to CSS hack, but it is not as concise as above.

# Example {color: #333;}/* Moz */
* Html # example {color: #666;}/* IE6 */
* + Html # example {color: #999;}/* IE7 */

The second method is to use conditional annotations dedicated to IE.

<! -- Other browsers -->
<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>

<! -- [If IE 7]>
<! -- Suitable for IE7 -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
<! [Endif] -->

<! -- [If lte ie 6]>
<! -- Suitable for IE6 and later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->

Third, the CSS Filter method, which is translated from a foreign website as a classic ..

Create a CSS style as follows:

# Item {
Width: 200px;
Height: 200px;
Background: red;
}

Create a new Div and use the CSS style defined above:

<Div id = "item"> some text here </div>

Add the lang attribute in the body representation. The Chinese character is Zh:

<Body lang = "en">

Now define another style for the DIV element:

*: Lang (en) # item {
Background: Green! Important;
}

This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, unfortunately, Safari does not support this attribute, so you need to add the following CSS style:

# Item: Empty {
Background: Green! Important
}

: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than IE versions.

For compatibility with IE6 and FF, consider the previous! Important prefers the first method, which is concise and compatible.

Reprinted: http://www.webbise.com/post/63.html