Differences in CSS style sheets between browsers Firefox and IE

1 Css style for Firefox ie6 IE7

Nowadays most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 which is to use "*+Html". Now browse it with IE7 and there should be no problem.

Now you can write a CSS like this:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color : #999; } /* IE7 */

Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7.

2 Centering problem in css layout

The main style definition is as follows:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Description:

First define TEXT-ALIGN: center in the parent element; this means that the content in the parent element is centered; this setting is enough for IE.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when defining the child element. It should be noted that if you want to use this method to center the entire page, it is recommended not to use it. In a DIV, you can split multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of the box model. important

                                                                                use using   using   using           through using ’ ’s ’ through out using ’ through ‐ ‐   ‐   ‐                                                  out out through out out out out out out out out Through Out Through outolece out Through together to  Th through ’ through ’ through-the-a-w-www ’ to ff ff

                     

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}

Let’s talk about block in detail, There are two inline elements. The characteristic of the Block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the Inline element is that it is on the same line as other elements. ...Uncontrollable (embedded elements);

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of being arranged in the same row diplay:table;

5 Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 Minimum width of the page

min-width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a