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

來源:互聯網
上載者:User

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.