Css+Div在IE6上一些細小問題總結

  好久沒有做過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>