【发布时间】：2010-04-12 00:02:28
【问题描述】：
在我正在设计的页面上，我有一个表单，其中包含一个文本类型的输入。通常，此表单和输入会在我的浏览器 Chrome 中正确呈现，但偶尔会在应有的位置左侧呈现大约 20 像素。当我刷新页面时，它会回到原来的正确位置。
到目前为止，我只在 Chrome 中进行了测试，所以这不是跨浏览器问题（它发生在同一个浏览器中）。我下面的代码有什么问题吗？
这是我的 HTML 代码：
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
这是我的 CSS 代码：
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
【问题讨论】：