Firefox，IE和Chrome不同的空白处理

Question

我很好奇为什么我会通过以下简单代码在Chrome和Firefox上获得不同的结果：

1. 在Chrome上中断
2. 在Firefox，IE和Chrome上均可使用

唯一的区别在于HTML布局：

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

与此：

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

是否有建议的修复程序，而没有难看的hack和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*/
}

工作演示

方法2：

使用浮点数作为输入，并使用overflow:hidden到父div清除浮点数。

演示