Question

有人可以发现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>

Answer 1

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

Answer 2

.footerLogos {
    width:999px;
}

我不知道为什么那个盒子应该这么小，因为它的底部无论如何都显示出来。

也许这样你就不再需要浮动了。

Answer 3

假设你的html结构中有两个结束div，我的猜测是它是一个浮点问题。把它放在#footer的结束div之前，你应该没问题：

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

还要添加

#footer{
    clear:both;
}

Answer 4

在#footer css中添加此内容：

#footer{
    clear:both;
}

IE6页脚布局打破

4 个答案: