我开始布局一个网站，我在 firefox 中遇到问题，主要是有时在 safari 中遇到问题，具体取决于条件，例如在 safari 中，如果我通过在地址栏中键入它来加载页面，它将在中间显示搜索 div标题边框，但是如果我再次突出显示地址栏并按 Enter 键，它会正确显示，如果在所有内容正确显示后单击刷新，它将导致搜索框位于标题边框的中间，并且登录 div 也会消失。一切都在 chrome 中运行良好。在 Firefox 中，提交按钮位于文本输入字段下方，无论我做什么，它似乎都留在那里。我的代码在这里http://jsfiddle.net/ES2Mz/和下面：
<html>
<head>
<title>
TESTING!
</title>
<LINK href="CLLProfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div id="header">
<img src="http://www.placekitten.com/400/100">
<div class="login">
<a href="http://www.signup.com">Sign Up</a> <a href="http://www.login.com">Login</a>
</div>
<div class="search">
<form id ="search" action="" method="post" enctype="multipart/form-data">
<label>Search:</label>
<input type="text" name="searchBox" id="searchBox" /> <input type="submit" id="Submit" value="Submit" />
</form>
</div>
</div>
<div class="content">
Here is the CONTENT
<div class="profileInfo">
PROFILE INFO
</div>
</div>
</div>
</body>
</html>
CSS
body{
background: gainsboro;
}
.container{
padding-top: 20px;
background: gold;
width: 900px;
height: 1300px;
margin: 0 auto;
}
.content {
background: #aad500;
width: 800px;
height: 1100px;
margin: 0 auto;
border: black solid medium;
}
#header {
width: 800px;
height: 150px;
margin: 0 auto;
background: #aad500;
border: black solid medium;
}
#header img{
position: relative;
left: 50px;
top: 25px;
}
.login {
width: 350px;
height: 35px;
float: right;
background: #aad500;
}
.search{
background: #aad500;
color: white;
width: 250px;
height: 20px;
position: relative;
margin-top: 10px;
margin-left: 550px;
}
.profileInfo{
background: whitesmoke;
width: 750px;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.login a{
float: right;
margin-left: 10px;
margin-right: 20px;
margin-top: 5px;
font-size: large;
color: whitesmoke;
}