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对齐问题

回答

相关问题