如何正确地并排输入文本和按钮元素？

Question

我尝试使用并排按钮创建搜索输入文本。

以下是要求：

1. 这些元素应该是绝对的中心。垂直和水平。
2. 解决方案应该适用于IE8 +和优秀的浏览器。
3. 在浏览器中，默认字体大小较大，没有文字或图形 应该在用户浏览器上隐藏或放错元素。

我相信我对垂直对齐部件没有任何问题。使用伪元素高度：100％; with display：inline-block; 技术。

但是，我确实遇到了问题，将按钮元素与输入文本字段并排放置，周围没有任何白色间隙。

这里是 HTML ：

<div id="main-wrapper">
  <div id="search-wrapper">
    <h3>Hello there</h3>
    <form action="" class="search-form">
      <input type="text" name="lorem" />
      <button type="submit">
        <span>Search</span> 
        <!-- should be a place to background image or icon font symbol.  -->       
      </button>    
    </form>
  </div>
</div>

这里是 CSS ：

/* START - Absolute Centering */
#main-wrapper {
    text-align:center;
    background: yellow;
    height: 300px;
}

#main-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#search-wrapper {
    display: inline-block;
    vertical-align: middle;
    background-color: green;
    padding: 20px 20%;
}
/* END - Absolute Centering */

/* START - Input and Button Search - Side by Side */
.search-form {
    display: inline-block;
    border: 5px solid red;
    background: #fff;
}

.search-form input {
   font-size: 1.3em;
    height: 50px;
    border: none;
}

.search-form button {
    border: none;
    background-color: red;
    height: 50px;
    vertical-align: top; /* no dice */
    cursor: pointer;
}

这里是小提琴： http://jsfiddle.net/uQh8D/

这里有我们希望摆脱的丑陋白色部分的屏幕截图，正如我们在Chrome和Firefox上看到的那样：

Chrome 34：



Firefox 28（差不多）：



非常感谢任何帮助。

Answer 1

一个简单的解决方法就是使用box-sizing: border-box，但IE支持这个只是部分所以我不确定它是否适用于ie8 - 你可能必须找到它的-ms版本工作

box-sizing: border-box example

更全面的解决方案可能是使用display:table，因为它应该支持IE 8

display:table example