html - 媒体查询在 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/