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

Question

无法弄清楚如何对齐“添加新元素”按钮以及“搜索”控件。仅在 Firefox 中不行，在其他浏览器中按钮与外部容器的顶部对齐(它是一种形式)。似乎在 Firefox 中，此按钮与“搜索”控件中文本的基线对齐 - “搜索文本”。但是这些信息并不能帮助我解决问题，我尝试了不同的方法。

附言请不要建议使用 float 或绝对定位 - 我不能对我们的设计师的设计进行太多更改。

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。

---

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