CSS + Div summary of some minor issues on IE6

I haven't done Web development for a long time. Recently, some CSS + Div page design work is really a little difficult, especially some things run normally on IE8, IE7 and IE6 are outrageous. Here we will record the differences in IE6.

1. Question about Div line

When designing a page, you want to use a div to simulate a straight line (in some cases, you can use border and padding), set the width and height for the DIV, and set the background color or background image, for example:

# Bottomline
{
Background-color: red;
Width: 800px;
Height: 3px;
}

In IE8, a red line with a height of 3 pixels is displayed, but in IE6, the height of this red line is far greater than 3 pixels, and there seems to be a font height. To solve this problem, add the overflow attribute:

# Bottomline
{
Background-color: red;
Width: 800px;
Height: 3px;
Overflow: hidden;
}

2. Multiple divs float in the same row

If you want to display multiple divs in the same row, you can first let the right div float, but the Left Div does not float, under IE8.CodeNo problem:
. Divwrapper
{
Width: 800px;
Height: 300px;
}

. Divleft
{
Width: 100px;
Height: 300px;
Background-color: green;
}

. divright
{< br> width: 100px;
Height: 300px;
background-color: green;
float: right;
}< br>. divcenter
{< br> width: 600px;
Height: 300px;
background-color: red;
float: right;
}

<Div class = "divwrapper">
<Div class = "divright"> right div </div>
<Div class = "divcenter"> center Div </div>
<Div class = "divleft"> Left Div </div>
</Div>

However, in IE6, the three divs cannot be displayed in one row and will be displayed in two rows. In IE6, you can float all the divs either left or right. If it is changed to the following, no problem occurs:

. Divwrapper
{
Width: 800px;
Height: 300px;
}

. divleft
{< br> width: 100px;
Height: 300px;
background-color: green;
float: right;
}

. divright
{< br> width: 100px;
Height: 300px;
background-color: green;
float: right;
}< br>. divcenter
{< br> width: 600px;
Height: 300px;
background-color: red;
float: right;
}

Left Div

Center div

right div