无法在 Firefox 中正确定位第二个 inline-block 元素

Question

不知道如何对齐“添加新项目”按钮以及“搜索”控件。 不仅在 Firefox 中还可以，在其他浏览器中，按钮与外部容器的顶部对齐（它是一个表单）。 似乎在 Firefox 中，此按钮与“搜索”控件中的文本基线对齐 - “搜索文本”。但是这些信息并不能帮助我解决问题，我尝试了不同的方法。

附：拜托，不要建议使用浮动或绝对定位 - 我不能改变我们设计师的设计。

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。

---

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