火狐，IE和Chrome不同的空格处理

Question

我很好奇，为什么我得到的Chrome和Firefox不同的结果与这个简单的代码：

1. Breaks on Chrome
2. Works on both Firefox, IE and Chrome

唯一的区别是在HTML布局中：

<div class="container"> 
    <div class="form-wrapper"> 
    <input class="email" type="text"> 
    <button class="send pull-right">Send</button> 
    </div> 
</div> 

vs this：

<div class="container"> 
    <div class="form-wrapper"> 
    <input class="email" type="text"><button class="send pull-right">Send</button> 
    </div> 
</div> 

没有丑陋的黑客和HTML更改的任何推荐的修复？

Answer 1

<input>默认情况下不是块元素。您必须使用float:left他们：

.form-wrapper {overflow:hidden;} 
input.email, button.send{float:left} 

Answer 2

方法1：

/* CSS used here will be applied after bootstrap.css */ 
.form-wrapper { 
    background-color: #000; 
    padding: 10px; 
    font-size: 0; /*set font-size to zero*/ 
} 
input.email { 
    background-color: #fff; 
    border: none; 
    height: 50px; 
    width: 70%; 
    padding-left: 15px; 
    padding-right: 15px; 
    font-size: 16px; /*reset font-size*/ 
} 

button.send { 
    background-color: grey; 
    border: none; 
    height: 50px; 
    width: 30%; 
    font-size: 16px; /*reset font-size*/ 
} 

working demo

方法2：

使用浮动输入和清除使用overflow:hidden浮动向父母分部。

demo