Firefox, 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> 

против:

<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 к родительскому div.

demo