IE and Firefox CSS compatibility)

Keywords: CSS compatibility

Doctype affects CSS Processing

Firefox: When div is set to margin-left and margin-right is set to auto, it is already centered. IE is not working.

When setting text-align for Firefox: body, you must set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

Firefox: 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.

Firefox: supported! Important, ie is ignored, available! Important sets a special style for Firefox

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.

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

Firefox: 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.

Small set of XHTML + CSS compatibility Solutions
There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write some of the problems I encountered below:

1. 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. 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: xxpx! Important;

2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, you can make the following changes:

Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.

Ul {margin: 0; padding: 0;} solves most problems.

4. For the script, the language attribute is not supported in xhtml1.1. You only need to change the code

Suggestion: Check the compatibility of Your webpage CSS with the browser during webpage design. This can effectively avoid layout disorder caused by browser incompatibility.

CSS hack:
Difference between IE6 and FF:
Background: orange; * Background: blue;

Differences between [color = blueie6 [/color] and IE7:
Background: Green! Important; Background: blue;

Difference between IE7 and FF:
Background: orange; * Background: green;

Difference ff, IE7, IE6:

Background: orange;

* Background: Green! Important;

* Background: blue;

Note: Both IE and standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;

Internet Explorer 6 Internet Explorer 7 Firefox
* √ *
! Important × √

Add another underscore "_",
IE6 supports underlines, while IE7 and Firefox do not. (Recommended)

So you can also differentiate them as follows: Firefox, IE7, and IE6.
: Background: orange; * Background: green; _ Background: blue;

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.

Make the DIV adaptive height in IE and Firefox

<Div style = "height: 100%; overflow: auto;"> adaptive height </div>

Haha, then I found a strange phenomenon, that is, if I only add "height: 100%;" (set height 100%), I can adapt to the height under IE, but Firefox doesn't, if you only add "overflow: auto;" (set overflow automatically), the auto height can be adjusted in Firefox, but ie cannot. The perfect solution is "height: 100%; overflow: auto; "You can add both attributes at the same time...

Solutions to gaps between images and containers

Three effective methods:

First, label the image IMG with display: block.

IMG {display: block}

2. Define the font size in the container as 0.

Div {
Width: 110px;
Border: 1px solid #000000;
Font-size: 0;
}

Third, define the image IMG label vertical-align: Bottom, vertical-align: middle, vertical-align: Top

IMG {vertical-align: Bottom}

The reason why there is a gap between the image and the container in IE

By default, inline elements such as image text are aligned with the baseline of the parent element, while baseline has a certain distance (this distance is related to font-size and font-family, not necessarily 5px), so setting vertical-align: ToP/bottom/Text-top/Text-bottom can avoid this situation. Besides Li, other block elements include IMG.

As for the HTML attribute align = "center" (the image browser will process it as align = "Middle"), it is equivalent to vertical-align: middle; so the same is true, as long as vertical-align does not take baseline, this gap disappears.

Solution to non-alignment between the form input box and Image

Vertical-align: middle;

Set vertical-align: middle in the form input box and image style definition to solve this problem.

Flash and Div layers (Z-index)

<Param name = "wmode" value = "Transparent">

<Param name = "wmode" value = "Opaque">

<Param name = "wmode" value = "window">

Note: Other browsers (Firefox opera etc.) are supported. Use <embed wmode = "Transparent"/> to add the wmode value to the embed node.

Window Mode

In the default display mode, Flash Player has its own window handle, which means that flash videos exist in a display instance in windows, and it is on the core display window of the browser, so Flash is only seemingly displayed in the browser, but this is also the fastest and most efficient rendering mode of flash. Because it is independent from the HTML rendering surface of the browser, flash will always block all DHTML layers whose positions overlap with him in the default display mode.

However, most Apple Computer browsers allow the DHTML layer to be displayed on top of the flash, but the flash film may be playing a strange phenomenon, such as the DHTML layer display exception like a piece of flash.

Opaque Mode

This is a window-free mode. In this case, flash player does not have its own window handle, which requires the browser to tell the Flash Player the time and position of rendering the surface of the browser. At this time, the flash film will not be higher than the HTML rendering surface of the browser, but will be on the same page as other elements, therefore, you can use the Z-index value to control whether the DHTML elements are flash or hidden.

Transparent Mode
Transparent mode. In this mode, Flash Player sets the background color of the stage.

The Alpha value will be 0 and only visible objects on the stage will be drawn. You can also use Z-index to control the depth value of the Flash video, however, unlike the opaque mode, this will reduce the playback effect of Flash videos, in addition, if wmode = "Opaque" or "Transparent" is set for Flash Player versions earlier than 9.0.115, the full screen mode will fail.

I understand the implementation methods and meanings of various modes. In future development, you can set the wmode attribute value according to the actual situation.