0

我制作了一个在 Chrome 和 Firefox 上看起来很棒的页脚，并且位于它所属页面的底部。但是，它不适用于 Internet Explorer。我在 Internet Explorer 10 上试过这个。我该如何解决这个问题？

我的大部分页面都在包装器中，为了使页脚工作，它位于包装器之外。

首先，我应该提一下，在查看代码后，我意识到我的浮动并没有在 Internet Explorer 的底部留下空间。这是HTML代码：

<div id="mainfloat">
  <div class="text_body">
    <p>Text goes here.</p> 
  </div><!--text body-->
</div><!--mainfloat-->

这是 mainfloat 的 CSS：

#mainfloat{
    float: left;
    position: relative; /*also important to add*/
    background-color:#FFF;
    font-family: Arial, Helvetica, sans-serif;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    min-height: 550px;
    min-width: 650px; /*this was commented out earlier*/
    max-width: 900px;
    /*width: 100%;*/ /*This is what was causing my footer to go berserk!*/
    margin-left: 15%;
    margin-right: 17%;
    margin-top: 40px;
    /*margin-bottom: 30%;*/ /*Separate the main float from the footer. Experiment*/
    padding:10px;
    margin-bottom: 220px; /*makes space between float and footer*/
}

#这是页脚的 HTML（为了显示代码，链接已替换为“ ”）：

<div id="footer">
    <div id="footer_wrapper"> 
        <div class="footer_font_float_left">Quick links:</div>
        <div class="column">
          <strong>#:</strong><br />
          <a href="#">#</a><br />
          <a href="#">#</a><br />
          <a href="#">#</a><br />
          <a href="#">#</a>
       </div>
      <div class="column">
         <strong>#</strong><br />
         <a href="#">#</a><br />
         <a href="#">#</a><br />
      </div>
     <div class="column">
         <strong>Web #</strong><br />
         <a href="#">#</a><br />
     </div>
     <div class="footer_font_float_bottom">Interested? <a href="#">Contact me!</a>
     </div>
  </div><!--footer_wrapper-->     
</div><!--footer-->

这是CSS：

#footer{
  min-height: 50px;
  max-height: 200px;
  min-width: 800px;
  width: 100%;
  background: black;
  bottom: 0;
  position: absolute;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
}

.footer_font_float_bottom > a:link{
  color: #FFFFFF;
  font-size: 11pt
}

.footer_font_float_bottom > a:visited{
  color: #FFFFFF;
  font-size: 11pt
}

.column{
  float: left;
  padding: 20px 0 0 50px; /*top, right, bottom, left TRBL*/ 
}

.column > a:link{
    color: #FFFFFF;
    font-size: 11pt;
}

.column > a:visited{
    color: #FFFFFF;
    font-size: 11pt;
}

.footer_font_float_bottom{
  bottom: 0;    
  margin-top: 120px;
}


#footer_wrapper{
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blank_div{
    /*margin-bottom: 30%;*/
}

我还为 HTML、包装器和正文标签添加了一些 CSS，以帮助页脚：

#wrapper {
    min-height:100%;
    position:relative;
    width: 100%;
}

html {
   position: relative;
   min-height: 100%;
}

body {
   margin: 0 0 100px; /* bottom = footer height */
}

有没有办法我可以输入代码来修复它的兼容性？是导致问题的主要浮动吗？

任何帮助将不胜感激。谢谢！

4

0 回答 0