Question

我很好奇为什么我会使用这个简单的代码在Chrome和Firefox上获得不同的结果：

Breaks on Chrome
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>

与此相对：

<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：

使用float作为输入并使用overflow:hidden清除浮动到父div。

demo

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

2 个答案: