Differences between IE and Firefox on CSS

In fact, I have never touched CSS-related content before, and I am doing business programming. I have never thought that the design of front-end pages can be so complex. As a CSS cainiao, I also came into contact with CSS-related design. The low-level problems and time-wasting situations are also emerging. Therefore, the difference between IE and Firefox on CSS is summarized through various searches and their own practical learning, which will be used for reference.

First of all, we all know that the parsing of IE and Firefox for the core model is different, which naturally leads to many head-scratching problems. The following is my experience:

1. Height Difference

IE: when no height is defined, the image content with an undefined height will be changed according to the content height;

When the height is defined, the actual content height is used when the content exceeds the height.

FF: when no height is defined, if the image content is included in the content, the resolution of the MF height is based on the printing standard, which will cause a highly inconsistent situation with the actual content;

When the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.

Suggestion: when the content height can be determined, it is best to define the height. If there is no way to define the height, try not to use the border style.

2. Differences in width

IE: Content width = the container width you define (Internet Explorer 'width')-padding width-border width.

If width: 100px is defined in IE, and padding: 5px, the displayed width is 100px.

FF: Container width = content width + padding width + border width.

If width: 100px is defined in Firefox, and padding: 5px, the displayed width is 105px.

Suggestion: use! Important; however ,! Important must be in front.

For example, width: 95px! Important; width: 100px; padding: 5px ;.

Note: The same is true for height!

3. Differences between float

(1) Space Processing

IE: When the float keyword is used for DIV side by side, IE processes spaces between blocks.

FF: When the float keyword is used for DIV side by side, Firefox does not process spaces between blocks.

Suggestion: It is often found that the float keyword is displayed normally in Firefox, but spaces may appear in IE, which is the reason;

Avoid adding spaces or carriage return when a div connects to the div, that is, a div is written immediately after this div;

Or, put the div in li for processing, so there will be no space problem.

(2) Double Margin

IE: When float is used, IE's margin doubles.

FF: normal display.

Suggestion: for IE, add display: inline;

<Div id = "float"> </div> the corresponding css is

# Float {

Float: left;

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

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

}

4. Processing the mouse position

IE: when obtaining the mouse position of an event, IE uses event. x and event. y, and the value can be directly used without adding a unit. IE provides the default unit;

Div. style. left = event. x

Div. style. top = event. y

In this case, the position displayed by the div is the mouse position.

FF: when obtaining the mouse position of an event, Firefox uses MouseEvent. pageX and MouseEvent. pageY. If the value is assigned directly without the Unit, it is invalid. The unit must be added.

Div. style. left = MouseEvent. pageX

Div. style. top = MouseEvent. pageY

In this case, the position of the div is 0, 0.

Suggestion: add all units, effective for IE or Firefox.

IE: div. style. left = event. x + 'px'

Div. style. top = event. y + 'px'

FF: div. style. left = MouseEvent. pageX + 'px'

Div. style. top = MouseEvent. pageY + 'px'

There are many solutions for different IE and Firefox solutions. However, when the problem is resolved directly to different models, we can only write the browser-specific methods separately for different browsers. This is also essential for writing exquisite CSS.

The above is just a personal ignorance, and I hope it will be helpful to those who are new to CSS.