Internet Explorer 6, Internet Explorer 7, and Firefox are incompatible with each other.

Ie6.0, ie7.0 and Firefox CSS2008-05-04. doctype affect CSS Processing

2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. FF: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

5. FF: supported! Important, ie is ignored, available! Important sets a special style for FF

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

8. FF: adds a border and a background color to the link. You must 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.

9. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed! The important attribute ie cannot be identified, but other browsers can. Therefore, in IE, it is actually interpreted 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: xxpx! Important;

11. UL labels have padding values by default in Mozilla, and only margin has a value in IE. Therefore, UL {margin: 0; padding: 0;} can be defined first to solve most problems.

Note:

1. The DIV of float must be closed.

For example: (floata and floatb attributes have been set to float: Left;) <# Div id = "floata">

<# Div id = "floatb">

<# Div id = "notfloatc"> the notfloatc here does not want to continue translation, but wants to move down.

This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.

In the <# Div class = "floatb">

<# Div class = "notfloatc"> Add <# Div class = "clear"> This Div must pay attention to the declaration position and be placed in the most appropriate place, it must be at the same level as the two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception occurs.

And define the clear style as follows:. Clear {

Clear: Both;} In addition, overflow: hidden should be added to wrapper to automatically adapt the height;

When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.

For example, a wrapper is defined as follows:. colwrapper {

Overflow: hidden;

Zoom: 1;

Margin: 5px auto ;}

2. Margin doubling Problem

The DIV set to float doubles the margin set in IE. This is a bug in IE6.

The solution is to add the display: inline In the div;

For example:

<# Div id = "imfloat">

The corresponding CSS is

# Iamfloat {

Float: left;

Margin: 5px;/* 10 Px in IE */

Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore. 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 you must set XXXX! Important is placed on the other sentence, which has been mentioned above

When ie7.0 came out, there were new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of ie7.0 compatibility, I found the following article:

I use most of them now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! After searching, I found a good hack Method for IE7 and used "* + html". Now I can use IE7 to browse it. It should be okay.

You can write a CSS file as follows:

# Example {color: #333;}/* Moz */

* Html # example {color: #666;}/* IE6 */

* + Html # example {color: #999;}/* IE7 */

The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999. CSS is compatible with IE6, IE7, and Firefox. The first method is CSS hack.

Height: 20px;/* For Firefox */

* Height: 25px;/* 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] -->

The third method of CSS Filter is as follows ..

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

I personally prefer the first method, which is concise and compatible. 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. So the solution comes out, that is, for the non-uniform default display mode, you can specify a specific value in CSS. Next I will describe the default label I know.

The list label ul Li, which is the most complained by a friend, says that IE and FF are always different each time they encounter this label. In this case, why don't you define the attributes of the label in the style sheet, such as UL {padding: 0; margin: 0 ;}, and then check whether the label is consistent? For UL labels, ie will automatically indent several pixels, but FF is not like this, so this is the root cause. of course, the above definition is definitely not very beautiful. You can adjust it manually at this time, for example, to {padding: 0; margin: 0 0 0 10px; List-style-position: inside;}, so for this label in the future, as long as you find that IE and FF are inconsistent, you can check the corresponding CSS attributes and describe them exaggerated, use IE and Firefox to view the results. If they are consistent, the results are valid. form tag, which is in IE, will automatically margin some margins, while margin in FF is 0. Therefore, if you want to display consistent, so it is best to specify margin and padding in CSS. For the above two problems, I usually use this style ul first in CSS, FORM {margin: 0; padding: 0 ;} definition is dead, so it won't be a headache in the future.

We hope that you will continue to explore more labels with different default values.

The following question is not the default value.

For typographical layout, the most commonly used CSS description may be float: left. sometimes we need to make a unified background behind the float DIV in the N column, for example: <Div id = "page"> <Div id = "Left"> </div> <Div id = "center"> </div> <Div id = "right"> </div>, for example, we want to set the background of the page to Blue to make the background color of all three columns blue, but we will find that as the left center right is stretched down, the storage height of the page remains unchanged. The problem is that the page is not a float attribute. Because the page is centered, it cannot be set to float, therefore, we should solve <Div id = "page"> <Div id = "BG" style = "float: Left; width: 100% "> <Div id =" Left "> </div> <Div id =" center "> </Div> <Div id = "right"> </div>. embed a float Left Div with a width of 100%. 1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)

<Style>

# Wrapper

{

Width: 100px! Important;/* IE7 + FF */

Width: 80px;/* IE6 */

}

</Style>

2, IE6/ie77 for Firefox

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.

<Style>

# Wrapper

{

# Wrapper {width: 120px;}/* Firefox */

* Html # wrapper {width: 80px;}/* IE6 fixed */

* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */

}

</Style>

Note:

* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

2. Universal float closure (very important !)

For details about the principle of clear float, refer to [How to clear floats without structural markup]

Add the following code to global CSS and add class = "Clearfix" to the DIV to be closed.

<Style>

/* Clear fix */

. Clearfix: After

{

Content :".";

Display: block;

Height: 0;

Clear: both;

Visibility: hidden;

}

. Clearfix

{

Display: inline-block;

}

/* Hide from IE Mac */

. Clearfix {display: block ;}

/* End hide from IE Mac */

/* End of Clearfix */

</Style>

Iii. Other compatibility skills)

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)

2. center problem.

1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)

2). horizontal center. Margin: 0 auto; (of course not omnipotent)

3. To add a style to the content of tag a, set display: block)

4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.

5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)

6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.

7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

1. CSS style for Firefox IE6 IE7

Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests,

But IE7! Important can be correctly explained, and the page will not be displayed as required! Find a needle

The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.

You can write a CSS file as follows:

#1 {color: #333;}/* Moz */

* Html #1 {color: #666;}/* IE6 */

* + Html #1 {color: #999;}/* IE7 */

The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

2. center problem in CSS layout

The main style definition is as follows:

Body {text-align: center ;}

# Center {margin-Right: auto; margin-left: auto ;}

Note:

First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.

However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"

It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence,

You only need to define margin-Right: auto; margin-left: auto; in each split Div.

3. Different explanations for the box model.

# 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 -}

4. Double distance of floating IE

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}

Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the features of the inline element are as follows: On the same line as other elements ,... uncontrollable (embedded element );

# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table;

5 questions about IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used,

In a normal browser, these two values will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.

For example, to set a background image, the width is important. To solve this problem, you can:

# Box {width: 80px; Height: 35px;} HTML> body # box {width: auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}

6. Minimum page width

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this,

In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:

Then CSS is designed like this:

# Container {Min-width: 600px; width: expression (document. Body. clientwidth <600? "600px": "Auto ");}

The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

7. Clear floating

. Hackbox {display: Table; // display the object as a block element-Level Table} Or. hackbox {clear: Both ;}

Or add: After (pseudo object) to set the content after the object, which is usually used with content. ie does not support this pseudo object, not supported by IE browsers,

So it does not affect IE/win browsers. This is the most troublesome ...... # Box: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}

8 DIV floating ie text produces 3 pixel bug

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.

# Box {float: Left; width: 800px; }# left {float: Left; width: 50% ;}# right {width: 50% ;} * html # Left {margin-Right:-3px; // This sentence is critical}

HTML code <Div id = "box"> <Div id = "Left"> </div> <Div id = "right"> </div>

9 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. It is used by 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.

10 Internet Explorer

When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.

Some content cannot be displayed. When you select this area, the content is displayed on the page.

Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

11 highly unsuitable

The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses

Margin or paddign.

Example:

<Div id = "box">

<P> content in the p object </P>

</Div>

CSS: # box {background-color: # Eee ;}

# Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;}

Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div. Compatibility with IE and Firefox... the following uses IE to replace Internet Explorer and MF to replace mozzila Firefox

1. Document. Form. Item Problems

(1) existing problems:

Many statements such as document. formname. Item ("itemname") exist in the existing code and cannot be run in MF.

(2) solution:

Use document. formname. elements ["elementname"]

(3) Others

See 2

2. Collection class Object Problems

(1) existing problems:

In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.

(2) solution:

Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].

For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]

(3) Others

3. Window. Event

(1) existing problems:

Window. event cannot be run on MF.

(2) solution:

Mf events can only be used in the event. This problem cannot be solved. This can be changed as follows:

Original code (can be run in IE ):

<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit ()"/>

...

<Script language = "JavaScript">

Function gotosubmit (){

...

Alert (window. Event); // use window. Event

...

}

</SCRIPT>

New Code (run in IE and MF ):

<Input type = "button" name = "somebutton" value = "Submit" onclick = "javascript: gotosubmit (event)"/>

...

<Script language = "JavaScript">

Function gotosubmit (EVT ){

EVT = EVT? EVT: (window. event? Window. Event: NULL );

...

Alert (EVT); // use EVT

...

}

</SCRIPT>

In addition, if the first line of the new Code is not modified, it is the same as the old code (that is, the gotosubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the TPL part of this solution is still compatible with the old code.

4. Question about the ID of an HTML object as the object name

(1) Existing Problems

In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.

(2) Solution

Use getelementbyid ("idname") instead of idname as the object variable.

5. The problem of getting an object using the idname string

(1) Existing Problems

In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.

(2) Solution

Use getelementbyid (idname) instead of eval (idname ).

6. The variable name is the same as the ID of an HTML object.

(1) Existing Problems

In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.

(2) Solution

When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE.

In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.

(3) Others

See question 4

7. event. X and event. Y

(1) Existing Problems

In ie, the event object has the X and Y attributes, and MF does not.

(2) Solution

In MF, event. X is equivalent to event. pagex. But event. pagex IE does not.

Therefore, event. clientx is used instead of event. X. This variable is also available in IE.

Event. clientx is slightly different from event. pagex (when the page has a scroll bar), but most of the time it is equivalent.

If it is the same, it may be a little troublesome:

MX = event. X? Event. X: event. pagex;

Use MX instead of event. x

(3) Others

Event. layerx is available in both IE and MF. There is no difference in the specific significance of this function.

8. About Frame

(1) Existing Problems

In ie, the frame can be obtained using window. testframe, but not in MF.

(2) Solution

The main difference between MF and IE in frame usage is:

If the following attributes are written in the frame tag:

<Frame src = "xx.htm" id = "frameid" name = "framename"/>

Then Ie can access the window object corresponding to this frame through ID or name.

However, MF can only access the window object corresponding to this frame through name.

For example, if the above frame label is written in the HTM in the top window, you can access

IE: window. Top. frameid or window. Top. framename to access this window object

Mf: only window. Top. framename can access this window object.

In addition, both MF and IE can use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.

In addition, you can switch the frame content by using javasdesktop.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.

You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.

For details about frame and window, see the 'window and framework' article in BBS.

And the tests under the/test/JS/test_frame/directory

---- Adun 2004.12.09 Modification

9. In MF, attributes defined by myself must be obtained by getattribute ().

10. If there is no parentelement parement. Children in MF, use

Parentnode. childnodes

Childnodes has different meanings in IE and MF. MF uses Dom specifications, and blank text nodes are inserted in childnodes.

You can avoid this problem by using node. getelementsbytagname.

When a node in HTML is missing, ie and MF have different interpretations of parentnode, for example

<Form>

<Table>

<Input/>

</Table>

</Form>

In MF, the value of input. parentnode is form, while that of input. parentnode in IE is empty.

The node in MF does not have the removenode method. You must use the following method: node. parentnode. removechild (node)

11. Const Problems

(1) existing problems:

You cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.

(2) solution:

Use VaR instead of Const.

12. Body object

The MF body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

13. url Encoding

In JS, if the URL is written, write directly & do not write & for example, VAR url = 'xx. jsp? Objectname = XX & objectevent = XXX ';

FRM. Action = URL, so it is very likely that the URL will not be properly displayed, so that the parameter is not correctly transmitted to the server.

Generally, the server reports that the error parameter is not found.

Of course, if it is an exception in TPL, because TPL complies with the XML specification, the requirements are as follows &

Generally, MF cannot recognize &

14. nodename and tagname Problems

(1) existing problems:

In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be

There is a problem (the test is not performed, but my IE has been killed several times ).

(2) solution:

Use tagname, but check whether it is empty.

15. Element attributes

The input. Type attribute in IE is read-only, but can be modified in MF.

16. Document. getelementsbyname () and document. All [name] Problems

(1) existing problems:

In IE, neither getelementsbyname () nor document. All [name] can be used to obtain the DIV element (whether there are other elements that cannot be retrieved is unknown ).

17. Questions about calling sub-frameworks or elements in other frameworks

(1) In IE, you can use the following method to obtain the value in the child element.

Document. getelementbyid ("framename"). (document.) elementname or

Window. Frames ["framename"]. elementname

(2) In Firefox, it needs to be executed in the following format (compatible with IE ):

Window. Frames ["framename" 2.16.content?#doc ument. elementname

Window. Frames ["framename" 2.16.doc ument. elementname

In order to allow ongoing web files to be uploaded and run in Firefox, CSS and JS are being modified. Some problems found are recorded for future preparation.

In Firefox and IE, for element:

IE has properties that Firefox does not have: parentelement.

1. parentelement

2 ....

For previussibling, nextsibling:

Firefox explanation:

Previussibling: the node immediately preceding the given one in the tree, or null if there is no sibling node.

Nextsibling: the node immediately following the given one in the tree, or null if there is no sibling node.

IE explanation:

Previussibling: Retrieves a reference to the previous child of the parent for the object. Get a reference to the previous sibling object of this object.

Nextsibling: Retrieves a reference to the next child of the parent for the object. Get a reference to the next sibling object of this object.

For the following code:

Code

<Table id = "Table1" cellspacing = "0" cellpadding = "1">

<Thead>

<Tr class = "tillediv">

<TD class = "title side">

</TD>

<TD class = "title Middle">

Name

</TD>

<TD class = "title size" id = "id_size">

Size

</TD>

<TD class = "title Middle">

Type

</TD>

<TD class = "title Middle">

Last update

</TD>

<TD class = "title other">

Edge

</TD>

</Tr>

</Thead>

</Table>

In ie, the document. getelementbyid ("id_size "). previussibling or nextsibling obtain tablecell, while in Firefox, the text type ("\ n") is obtained. At this level, the understanding is completely different. Or is the tree in Firefox only at the node level, while that in IE at the element level?