IE7 CSS對齊問題

以下代碼在firefox和IE8上運行良好。但在IE 7中的「搜索輸入文本字段」不正確對齊與其他兩種精密組件，它灌進位..IE7 CSS對齊問題

下面是代碼，並感謝您的幫助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>CSS IE 7 Issue</title> 
     <style type="text/css"> 
     .search{ 
     background:#000000; 
     width:700px; 
     border:3px solid #000; 

     } 
     .inputWrap, .buttonWrap, .selectWrap {float:right; border:0px solid #000;} input[type="text"], input[type="button"],select {height:1.5em; line-height:1.5em; font-size:100%; border-width:0; padding:0;} /* ie7- specific css */ .search .textfield {float:right; display:inline;} 
     </style> 
    </head> 
    <body> 
     <div class="search"> 
      <form id="searchForm" action="#" method="post"> 
       <div class="buttonWrap"><input type="button" value="Go" /></div> 
       <div class="inputWrap"><input type="text" value="Search .." /></div> 
       <div class="selectWrap"> 
        <select> 
         <option value="Company">Company</option> 
         <option value="Profession">Profession</option> 
         <option value="People">People</option> 
        </select> 
       </div> 
      </form> 
      <br style="clear:both"/> 
     </div> 
    </body> 
</html>

來源

2011-03-25 Bujji

DEMO：http://so.devilmaycode.it/ie7-css-alignment-issue

.search { 
    text-align: right; 
    background: #000000; 
    width: 700px; 
    border: 3px solid #000; 
} 
form { 
    vertical-align: middle; 
    padding: 5px; 
    margin: 0; 
} 
form div { 
    display: inline; 
    border: 0; 
    margin: 0 5px 0 0; 
    padding: 0; 
} 
input, select {  
    vertical-align: middle; 
    margin: 0; 
    padding: 0 
}

來源

2011-03-25 13:25:54

感謝您的幫助。我檢查了你給我的鏈接，並嘗試了我的機器上的CSS。但是，如果我們刪除字段之間的空間，再次獲得相同的問題:( – Bujji 2011-03-25 14:31:27

我認爲看起來我們必須忍受它:)我檢查了linkedin.com（在搜索字段頂部），甚至他們也有同樣的問題。 – Bujji 2011-03-25 14:35:23

@Bujji：你應該使用固定的背景圖像按鈕和文本字段，然後使用某種選擇框js替換。因爲，IE7不支持選擇框樣式。 – 2011-03-25 16:55:55

嘗試爲同一級別上的所有元素及其父級顯式設置寬度。

來源

2011-03-25 13:37:58 Kon

IE7 CSS對齊問題

回答

相關問題