IE7頁腳問題

Question

我在IE7中遇到了一些我的頁腳元素問題。 The page I am working on can be found here。

火狐：

IE7：

這裏的標記：

<div id="footer_container"> 
    <div id="footer"> 
    <div class="top_row"> 
     <div class="link_box"> 
     <h3>Product</h3> 
     <ul> 
      <li><a href="../buyers/simple-yet-powerful">Buyers Tour</a></li> 
      <li><a href="../suppliers/simple-yet-powerful">Suppliers Tour</a></li> 
     </ul> 
     </div> 
     <div class="link_box"> 
     <h3>Company</h3> 
     <ul> 
      <li><a href="../about/our-story">About</a></li> 
      <li><a href="../about/contact">Contact</a></li> 
     <!-- <li><a href="../about/press-information">Press</a></li> --> 
     </ul> 
     </div> 
     <div class="link_box"> 
     <h3>Legal</h3> 
     <ul> 
      <li><a href="../about/terms-of-use">Terms of Use</a></li> 
      <li><a href="../about/privacy-policy">Privacy Policy</a></li> 
     </ul> 
     </div> 
     <form method="post"> 
     <fieldset> 
     <h3></h3> 
     <input type="text" name="email" id="emailText" maxlength="80" class="input" value="enter your email address..." onfocus="this.className=('input_active')" onblur="this.className=('input')" onclick="this.value='';" /> 
     <input type="button" name="submit" value="" class="subscribe_btn" onmouseover="this.className=('subscribe_btn_over')" onmouseout="this.className=('subscribe_btn')" onclick="submitEmail();" /> 
     <div id="submissionResponse"></div><small>*we will not share your email address</small><span class="clear"></span> 
     </fieldset> 
     </form> 

     <div class="twitter"> <a href="http://www.twitter.com/sample" onclick="window.open(this.href,'_blank');return false;"><strong></strong><span>@sample</span></a></div> 
    </div> 
    <div class="bot_row"> 
     <p><i>The premier online marketplace for buyers and suppliers of wholesale seafood.</i> | &copy;2009-2011 Sample, LLC - All Rights Reserved</p> 
     <a href="../signup" class="join_list_btn1"></a> </div> 
    <span class="clear"></span> 
    </div> 
    </div> 

的CSS：

/********************footer starts********************/ 
#footer_container{ float:left; width:100%; background:url(../images/footer_bg.jpg) repeat-x 0 0; height:122px; padding:30px 0 10px; color:#9d9d9d; overflow:hidden; min-width:989px;} 
#footer{ margin:0 auto; width:989px} 
#footer .top_row{ float:left; width:100%; height:95px} 
#footer .top_row .link_box{ float:left; width:115px; margin-right:40px; display:inline} 
#footer .top_row #submissionResponse{ float:left; width:45%;font-size:.9em;color:black;} 
#footer ul{ float:left; width:100%; list-style:none; margin-top:2px} 
#footer ul li{ float:left; width:100%; text-transform:uppercase; font-size:0.625em; line-height:15px; padding:2px 0 0} 
#footer a{ color:#9C9C9C;letter-spacing:0.06em; text-decoration:none;} 
#footer a:hover{ color:#0C7FD0;} 
#footer .link_box h3{ font-size:0.75em; text-transform:uppercase; color:#7B7B7B; font-weight:normal;border-bottom:1px solid #CDCDCD; padding-bottom:1px;letter-spacing:.05em;} 
#footer .twitter{ float:right; padding:0 55px 0 0; width:53px; text-align:center; margin:4px 0 0 0; font-size:0.813em;} 
#footer .twitter a{ float:left; width:100%;cursor:pointer;} 
#footer .twitter a strong{float:left; width:100%; background:url(../images/home-sprite.png) no-repeat -223px -676px; height:45px} 
#footer .twitter a span{float:left; width:100%; color:grey; text-decoration:none;margin-top:-6px;} 
#footer .twitter a:hover{color:#0072a7;} 
#footer .twitter a:hover strong{background-position:-223px -726px; color:#2f89c9;} 
#footer .twitter a:hover span{color:#595959;} 
#footer form{ float:left; width:323px; padding:0 15px 0 30px} 
#footer form h3{ width:180px;height:12px; float:left; background:url(../images/home-sprite.png) no-repeat 0 -998px; padding-bottom:7px;} 
#footer form .input{ border:1px solid #c4c4c4; width:240px; padding:4px 5px 4px; height:16px !important; border-right:0; margin:0; font-size:0.7em;letter-spacing:0.03em; color:#bbbbbb; float:left; outline:none} 
#footer form .input_active{border:1px solid #A6A6A6; width:240px; padding:4px 5px 4px; height:16px; border-right:0; font-size:0.8em; color:#555555; float:left; outline:none; } 

#footer form .subscribe_btn{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -575px; width:71px; height:26px; border:none; cursor:pointer} 
#footer form .subscribe_btn_over{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -601px; width:71px; height:26px; border:none; cursor:pointer} 
#footer form .subscribe_btn:active{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -627px; width:71px; height:26px; border:none; cursor:pointer} 
#footer form small{ display:block; text-align:right; font-size:0.635em; float:right; width:55%; padding:5px 0;color:#858585;} 
#footer .bot_row{ float:left; width:100%; color:#c1c1c1; height:37px; overflow:hidden} 
#footer .bot_row p{ padding:13px 0 0 0; float:left; font-size:0.64em;color:#A6A6A6;letter-spacing:.03em; } 

#footer .join_list_btn1{ float:right; background:url(../images/home-sprite.png) no-repeat 0 -690px; width:200px; height:36px; margin:14px 0 0 0; cursor:pointer} 
#footer .join_list_btn1:hover{background-position:0 -726px;} 
/********************footer ends********************/ 

Answer 1

對於我的錢來說，更好地利用時間製作符合標準的代碼，然後將IE7黑客應用到它，而不是將符合標準的代碼扭曲成符合標準的結，以使其在IE7上呈現良好。我建議使用僅限IE7的CSS樣式表進行此修復（請參閱http://www.quirksmode.org/css/condcom.htm以獲取有關條件樣式的幫助）。

<!--[if lte IE 7]> 
#footer form .input { 
padding-top: 0px; 
padding-left: 0px; 
width: 150px; 
height: 26px 
} 
<![endif]--> 

失蹤的Twitter圖標，我不認爲IE7支持在< strong>代碼塊顯示屏。嘗試使用< div>標記作爲背景區域，或將背景分配給定位標記。