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，它会将所有浏览器重置为相同的“无样式”，然后在单独的样式表中构建样式。