Summary of some minor problems with Css Div on IE6_html/css_WEB-ITnose

  好久没有做过Web开发了，最近做些css+div的页面设计工作还真有些不顺手，特别是有些东西在IE8上运行很正常，而在IE7和IE6上就离谱了。这里就一些ie6下不同之处做一下记录吧。

  1、Div做线条的问题

       在设计页面时有时候想用一个Div来模拟一条直线（某些情况是可以用Border和Padding等来实现的），给Div设置宽和高，并设置背景色或背景图，如：

#bottomLine
{
    background-color: Red;
    width:800px;
    height: 3px;
}

在IE8下确实显示的是一条高为3像素的红色横线，但在IE6下这条红线的高度远远超过3像素，好像有一个字体的高度。为了解决这个问题，加上overflow属性即可：

#bottomLine
{
    background-color: Red;
    width:800px;
    height: 3px;
    overflow:hidden;
}

2、多个div浮动在同一行

      有时候想在同一行显示多个DIV，可以先让右边的DIV靠右浮动，而最左边的那个DIV不浮动，在IE8下下面代码没问题：
      .divWrapper
      {
           width:800px;
           height:300px;
      }

      .divLeft
     {
         width:100px;
         height:300px;
         background-color:green;
     }

     .divRight
     {
         width:100px;
         height:300px;
         background-color:green;
         float: right;
     }
     .divCenter
     {
         width:600px;
         height:300px;
         background-color:Red;
         float:right;
     }

    

              

right div

              

center div

              

left div

    

But under IE6, these three DIVs cannot be displayed on one line and will be displayed on two lines. Under IE6, you can float all DIVs left or right. There is no problem if you change it to the following:

.divWrapper
{
width:800px; }

.divLeft

{

width:100px;
height:300px;
background-color:green;
float: right;
}
.divRight
                                                                                                                                                                   Center

{
            width: 600px; 🎜>          < ; Div class = "Divleft" & gt; left & lt;/div & gt;
& lt; div class = "divCenter" & gt; center div & lt;/div & gt;
& lt; s = "divily" & gt; right div & lt; /div>