学步园

 好久没有做过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;
     }

     <div class=”divWrapper”>
               <div class=”divRight”>right div</div>
               <div class=”divCenter”>center div</div>
               <div class=”divLeft”>left div</div>
     </div>

     但在IE6下，这三个DIV在一行是显示不下的，会换成两行显示。在IE6下可以将所有DIV都左浮动或右浮动，改为如下则没有问题：

      .divWrapper
      {
           width:800px;
           height:300px;
      }

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

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

     <div class=”divWrapper”>
               <div class=”divLeft”>left div</div>
               <div class=”divCenter”>center div</div>
              <div class=”divRight”>right div</div>
     </div>