Chrome/Safari中有趣的媒體查詢

Question

我在一個響應式網站上工作，我遇到了一個表單問題。我有一個容納表單和提交按鈕的外部容器。當用戶的瀏覽器達到524px或更小時，提交按鈕將移動到外部容器下方。在Firefox中一切正常，但是當我使用Safari/Chrome時，提交按鈕不會移回到外部容器中。

我這裏有問題的例子：yourl.co

這裏是我的HTML：

<div id="content"> 
<div id="formContent"> 
<form id="forms"> 
    <input id="email" type="email" class="text" placeholder="You@example.com" name="user[email]"/> 
    <input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/> 
</form> 
</div> 
</div> 

這裏是我的CSS：

#content{ 
width:100%; 
max-width:573px; 
height:auto; 
margin:45px auto 0 auto; 
} 
#formContent{ 
width:99%; 
height:56px; 
margin:40px auto 0 auto; 
background-color:#f6f5f5; 
} 
#forms{ 
border:none; 
height:51px; 
} 
#forms #email{ 
width:75.1%; 
height:51px; 
border:none; 
margin-top:2px; 
background-color:#f6f5f5; 
margin-left:6px; 
} 
#forms #email[type="email"]{ 
font-family:ubuntu-light; 
font-weight:100; 
font-size:1.875em; 
color:#7baec6; 
} 
#forms #email[type="email"]:focus{ 
color:#498cab; 
outline:none; 
} 
#forms #submit{ 
width:21.5%; 
height:47px; 
float:right; 
margin-right:6px; 
margin-top:5px; 
border:1px solid #0e5779; 
cursor:pointer; 
} 
@media only screen and (max-width: 524px){ 
#formContent{ 
    width:95%; 
    max-width:524px; 
    margin:40px auto 73px auto; 
} 
#forms #email{ 
    width:95%; 
    border:none; 
    margin-top:2px; 
    background-color:#f6f5f5; 
    margin-left:6px; 
} 
#forms #submit{ 
    width:125px; 
    margin:12px auto 0 auto; 
    float:none; 
    display:block; 
} 
} 

如果您需要了信息我會很樂意提供。謝謝你的幫助！

Answer 1

如果您將css float: left;添加到#forms #email一切都會好起來的。

你可以在這裏進行測試：http://jsfiddle.net/witchfinderx/qwnXT/1/