Common Problems in Div + CSS

1. center problem
In Div, ie is centered by default, and FF is left aligned by default.
To center FF content, add the code margin: auto;

2. High Problems
There is a horizontal Div arrangement. The above Div sets the height. If the actual content in the DIV is greater than the set height, the two DIV overlaps in ff; however, in IE, the following Div automatically gives space to the above Div. Therefore, to avoid overlapping layers, you must properly control the height, or simply do not write the height, so that it can be automatically adjusted.
Or set overflow: hidden.

3. Clear: both;
Taking footer as an example, if the layout of n columns controlled by float is used, footer may be dishonest when Browsing with ff, he is still under float control. If you want to keep it honestly at the bottom of the page, Write clear: Both; In the footer Div to achieve the effect!

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
}

5. Important explanation: Display: block and inline)
Display: block; // you can simulate embedded elements as block elements.

Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.
<Div>, <p>, Display: inline; // implement the same row Arrangement
Display: inline is to display the element as a row element.
The Inline element features:
And other elements are on one line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed.
<Span>, <A>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

Diplay: Table; // For ff, simulating the table Effect
6. Questions about the width and height of IE and FF
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. The shortest is 770px, and the shortest is 1024px. That is to say, if the window is smaller than 770xp, the scroll bar is displayed. If the window is larger than 1024px, the screen is centered automatically. IE does not recognize the Min-definition, but it actually uses the normal width and height as Min. In this way, if only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the root Root of IE is equal to the width and height not set.
CSS is designed as follows:
# Container {
Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");
}

The first Min-width is normal, but the width of row 2nd uses the limit Cr limit PT, which is recognized only by IE, which will make your HTML document not regular. In fact, the minimum width is achieved through the determination of javascr ī PT.

In the same way, you can achieve the maximum width for IE:
# Container
{
Min-width: 600px;
Max-width: pixel PX;
Width: expression (document. Body. clientwidth <600? & Quot; 600px & quot;: Document. Body. clientwidth & gt; 1200? "Pixel PX": "auto ";
}

7. FF: supported! Important and IE are ignored,
Available! Important (example: Height: 30px! Important; Height: 26px;) sets a special style for ff.
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 ff at the same time, hand only ie Can
FF: adds a border and a background color to the link. You must set display: block and float: left to ensure that no line break is set (float: Left must be set for the background image ). 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.
The box models in ff and IE are 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:

Div css xhtml xml example source code [www.52css.com]
Div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;