无法在Firefox中正确定位第二个内联块元素

Question

无法弄清楚，如何对齐＆＃34;添加新项目＆＃34;按钮以及＆＃34;搜索＆＃34;控制。 它只在Firefox中不行，在其他浏览器中，按钮与外部容器的顶部对齐（它是一个表单）。 好像在Firefox中这个按钮与＆＃34;搜索＆＃34;中的文本的基线对齐。控制 - ＆＃34;搜索文本＆＃34;。但是这些信息并没有帮助我解决问题，我尝试了不同的方法。

P.S。请不要建议使用浮动或绝对定位 - 我无法改变设计师的设计。

CSS：

.localSearchWrapper {
  margin-right: 2em;
  max-width: 20em;
  display: inline-block;
  padding: 0.2em;
  position: relative;
  top: -0.9em;
}

.addNewItem {
  height: 2.8em;
  width: 2.8em;
  border: 3px solid #0E6463;
  background: #FFF url("/Content/images/plus.png") no-repeat scroll center center / 2em auto;
}

HTML：

<form ...>
  <div class="localSearchWrapper">
    <input name="localsearch" placeholder="Search text" id="localSearchField" type="search"></input>
    <input id="localSearchButton" type="button"></input>
  </div>
  <button class="addNewItem" type="button"></button>
  <!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
  <!--[if lte IE 9]>
  <div class="old_ie_wrapper">
  <!--<![endif]-->
  <div style="overflow: hidden;" id="tableContainer" class="listContainer">...</div>    
  <!--[if lte IE 9]>
  </div>
  <!--<![endif]-->
</form>

FIDDLE SOURCE

Answer 1

您可以更改搜索框的垂直位置，因此您需要对按钮执行相同操作。

尝试添加

vertical-align: top;
position: relative;
top: -0.9em;

到.addNewItem。

更好的选择是在适当的元素上使用边距，而不是尝试调整每个元素。