html - 选择框的高度在 ie7 问题中增长

Question

大家好，我在构建带有标签、输入和选择字段的表单时遇到了问题。 我想要的是将它们全部放在一条线上(垂直对齐中间，在容器 DIV 内)，它们都具有相同的高度，并且可能为所有它们设​​置边框样式。

我在 Firefox 和 IE8 中实现了所有这些，但是如果我切换到兼容模式，我有:

1. -选择框增加它们的高度
2. -选择框失去我应用的边框样式(1px 纯红色)
3. -标签和选择然后向下移动以将它们的顶部边框与输入的边框对齐

为什么会这样，我该如何解决？ 谢谢 卢卡

这就是代码! =)

<div class="searcher" >
    <form>
        from:<input type="text" value="2011/02/22" />
        <input type="image" src="../img/cal.png"  width="16px" height="16px" style="vertical-align:middle;"/>
        to:<input type="text" value="2011/02/22" />

        <select style="width:110px;border:1px solid #F60;vertical-align:middle;">
          <option value="">sport</option>
          <option value="">gastronomy</option>
          <option value="">art&culture</option>
          <option value="">leisure</option>
          <option value="" selected="selected">All categories</option>
</select>
<select name="" style="width:90px">
        <option value="" selected="selected">Rome</option>
</select>
<a href="">search!</a>
       </form>
    </div>

/*AND CSS*/
html, body, span,a, applet, object, iframe, h1, h2, h3, h4, h5,div, h6,  
p,blockquote,pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,  
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, 
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,tr,
th,input, td {border: 0 none;margin: 0;padding: 0;}

html{overflow:auto;}

.searcher{float:left;height:38px;width:610px;padding:6px 15px 8px 15px;margin:30px 15px 0 0;}

body{font:13px Arial, Helvetica, sans-serif;cursor:default;padding:0; font-weight:bold;}
form{display:inline;}

Answer 1

最好的做法是使用重置样式表，例如 Eric Meyers ，这样它会将所有浏览器重置为相同的“无样式”，然后在单独的样式表中构建您的样式。