파이어 폭스, IE와 크롬 다른 공백 처리

Question

나는이 간단한 코드와 크롬과 파이어 폭스에 다른 결과를 얻을 왜 궁금

:

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>은 기본적으로 블록 요소가 아닙니다.

.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:left를 사용해야합니다 입력에 대한

사용 플로트와 overflow:hidden를 사용하여 부동 소수점을 취소 부모 div.

demo