2011-06-24 263 views
2

有人可以發現爲什麼這個佈局在IE6中打破?已經嘗試了各種選擇,但仍然是一樣的。請參閱屏幕截圖以瞭解確切的問題。感謝IE6頁腳佈局打破

屏幕截圖

http://img232.imageshack.us/i/footerie6.png/

http://img546.imageshack.us/i/footerie7.png/

HTML

<div id="footer"> 
     <div class="footerLogos"> 

     <img src="images/psw.png" alt="Footer Divider" width="164" height="50" /> 
     <br /><br /><br /> 
     <div class="footerLogosText"> 
      Pocket Size Websites 
     </div> 

     </div> 
     <div class="containerFooterBlock"> 
     <div class="footerTextabout"> 
      Quick Links<br /> 

       <br /> 
     <div class="footerTextContent"> 
      <ul> 

      <li><a href="#">Unique Website Design & Development</a></li> 
      <li>E-Commerce Shopping Carts</li> 
      <li>Content Management Systems (CMS)</li> 
      <li>Search Engine Optimization (SEO)</li> 
      <li>Logo &amp; Brochure Design</li> 
      </ul> 

     </div> 
      <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" /> 
     </div> 


     <div class="footerTextabout"> 
      Resources<br /> 

       <br /> 
     <div class="footerTextContent"> 
       <ul> 
      <li>Unique Website Design & Development</li> 


      <li>E-Commerce Shopping Carts</li> 


      <li>Content Management Systems (CMS)</li> 


      <li>Search Engine Optimization (SEO)</li> 


      <li>Web Hosting</li> 


      <li>Logo &amp; Brochure Design</li> 

      </ul> 

      </div> 

        <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" /> 
     </div> 
     <div class="footerTextabout"> 
      Blogs<br /> 

       <br /> 
      <div class="footerTextContent"> 
       <ul> 
      <li>Unique Website Design & Development</li> 


      <li>E-Commerce Shopping Carts</li> 


      <li>Content Management Systems (CMS)</li> 


      <li>Search Engine Optimization (SEO)</li> 


      <li>Web Hosting</li> 


      <li>Logo &amp; Brochure Design</li> 

      </ul> 

      </div> 
       <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />--> 

     </div> 
     </div> 
     <div id="footerText"> 
     &copy; some domain 2011 
     </div> 

    </div> 

CSS

#footer 
    { 

      width: 999px; 
      height:500px; 
      margin: 0 auto; 
      background-image: url(../images/footer-bg.png); 
      background-position: center center; 
      background-repeat: repeat-x; 

    } 

#footerText 
    { 

      text-align: center; 
      padding: 38px 0 0 0; 
      font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; 
      color: #000; 

    } 

.containerFooterBlock 
    { 

      float:left; 
      width: 999px; 
      padding: 3px 0 0 0; 
      clear:both; 

    } 

.footerTextabout 
    { 

      width:280px; 
      height:300px; 
      float:left; 
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
      font-size: 20px; 
      color: #fff; 
      font-weight: normal; 
      padding: 20px 0 0 36px; 
      clear:none; 

    } 

.footerTextContent 
    { 

      width:250px; 
      height:400px; 
      float:left; 
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
      font-size: 12px; 
      color: #fff; 
      font-weight: normal; 
      padding: 10px 0 0 10px; 
      line-height: 30px; 
      text-align:justify; 

    } 

.footerTextContent li 
    { 
      padding: 0 0 0 25px; 
      list-style-type: none; 
      background-image:url(../images/tick.png); 
      background-position: left 7px; 
      background-repeat: no-repeat 



    } 

.footerTextabout img 
    { 

      float:left; 
      padding:10px 0 0 18px; 

    } 

.footerLogos 
    { 

      width:250px; 
      float:left; 
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
      font-size: 16px; 
      color: #666; 
      font-weight: normal; 
      padding: 15px 0 0 24px; 


    } 

.footerLogosText 
    { 

      width:250px; 
      float:left; 
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
      font-size: 11px; 
      color: #999; 
      font-weight: normal; 
      padding: 2px 0 0 32px; 

    } 

.footerLogos img 
    { 

      float:left; 
      padding:5px 0 5px 0; 
      border: 1px solid black; 

    } 
      <div class="footerTextContent"> 
       <ul> 

       <li><a href="#">Unique Website Design & Development</a></li> 
       <li>E-Commerce Shopping Carts</li> 
       <li>Content Management Systems (CMS)</li> 
       <li>Search Engine Optimization (SEO)</li> 
       <li>Logo &amp; Brochure Design</li> 
       </ul> 

      </div> 
       <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" /> 
      </div> 


      <div class="footerTextabout"> 
       Resources<br /> 

        <br /> 
      <div class="footerTextContent"> 
        <ul> 
       <li>Unique Website Design & Development</li> 


       <li>E-Commerce Shopping Carts</li> 


       <li>Content Management Systems (CMS)</li> 


       <li>Search Engine Optimization (SEO)</li> 


       <li>Web Hosting</li> 


       <li>Logo &amp; Brochure Design</li> 

       </ul> 

       </div> 

         <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" /> 
      </div> 
      <div class="footerTextabout"> 
       Blogs<br /> 

        <br /> 
       <div class="footerTextContent"> 
        <ul> 
       <li>Unique Website Design & Development</li> 


       <li>E-Commerce Shopping Carts</li> 


       <li>Content Management Systems (CMS)</li> 


       <li>Search Engine Optimization (SEO)</li> 


       <li>Web Hosting</li> 


       <li>Logo &amp; Brochure Design</li> 

       </ul> 

       </div> 
        <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />--> 

      </div> 
      </div> 
      <div id="footerText"> 
      &copy; some domain 2011 
      </div> 

     </div> 
+0

我認爲它是因爲它的IE 6.恨這個版本! :P –

+0

好評。.. :) –

+1

如果我可能這麼大膽:IE6已經死了,埋沒了。不要考慮它,不要擔心它,不要爲此而煩惱。結束了。它消失了。我們可以輕鬆呼吸。 –

回答

1
.footerLogos { 
    width:999px; 
} 

我不明白爲什麼那個盒子應該很小,因爲其他東西都是反正顯示在它的底部。

也許這個你不需要浮子了。

+0

@ jose對不起,我不明白你的意見。容器寬度是999px,頁腳是999px? – bollo

+0

由於我可以看到.footerLogos右側沒有其他元素,可能會給它一個999px的寬度將讓它佔據所有頁腳寬度,以便其他內容將自行粘貼到底部,甚至沒有需要讓事情浮現。 –

+0

@ jose我做了寬度999px,並刪除了浮動,我已經在這裏發佈結果:http://img402.imageshack.us/i/footerie6update.png/無論我做什麼,我都無法獲得該頁腳。謝謝 – bollo

0

我們假設你的html結構中有兩個關閉div,我的猜測是這是一個浮動問題。結束div爲#footer的前把這個,你應該是好的:

<div style='clear:both'></div>

還添加

#footer{ 
    clear:both; 
}
+0

從我的版本沒有改變。謝謝 – bollo

1

嘗試在頁腳添加clear:both到最後一個元素:#footerText

+0

@js沒有改變。謝謝 – bollo

0

中添加這您的#footer css:

#footer{ 
    clear:both; 
} 
+0

仍然一樣。謝謝 – bollo

+0

我可以看到你的CSS代碼頁腳之上? –

+0

我已經包括完整的CSS @ http://jsfiddle.net/WtWqX/1/ – bollo