IE6页脚布局打破

有人可以发现为什么这个布局在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>

来源

2011-06-24 bollo

我认为它是因为它的IE 6.恨这个版本！：P –

好评。.. :) –

如果我可能这么大胆：IE6已经死了，埋没了。不要考虑它，不要担心它，不要为此而烦恼。结束了。它消失了。我们可以轻松呼吸。 –

.footerLogos { 
    width:999px; 
}

我不明白为什么那个盒子应该很小，因为其他东西都是反正显示在它的底部。

也许这个你不需要浮子了。

来源

2011-06-24 15:04:41

@ jose对不起，我不明白你的意见。容器宽度是999px，页脚是999px？ – bollo

由于我可以看到.footerLogos右侧没有其他元素，可能会给它一个999px的宽度将让它占据所有页脚宽度，以便其他内容将自行粘贴到底部，甚至没有需要让事情浮现。 –

@ jose我做了宽度999px，并删除了浮动，我已经在这里发布结果：http://img402.imageshack.us/i/footerie6update.png/无论我做什么，我都无法获得该页脚。谢谢 – bollo

我们假设你的html结构中有两个关闭div，我的猜测是这是一个浮动问题。结束div为#footer的前把这个，你应该是好的：

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

还添加

#footer{ 
    clear:both; 
}

来源

2011-06-24 13:20:20 locrizak

从我的版本没有改变。谢谢 – bollo

尝试在页脚添加clear:both到最后一个元素：#footerText

来源

2011-06-24 13:21:48 js1568

@js没有改变。谢谢 – bollo

中添加这您的#footer css：

#footer{ 
    clear:both; 
}

来源

2011-06-24 13:35:26

仍然一样。谢谢 – bollo

我可以看到你的CSS代码页脚之上？ –

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

IE6页脚布局打破

回答

相关问题