html - Chrome と Firefox ではフッターが機能するが、Internet Explorer では機能しない

Question

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、wrapper、および body タグの CSS もいくつか含めました。

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

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

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

コードを挿入して互換性を修正する方法はありますか? 問題を引き起こしているのはメインフロートですか？

どんな助けでも感謝します。ありがとうございました！