Question

在我正在设计的页面上，我有一个带有一个文本类型输入的表单。通常情况下，此表单和输入会在我的浏览器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;
}

Answer 1

尝试关闭您的BODY和HTML标记？另外，doctype“htmls”？

当我刷新页面时，我的表单输入有时会如何移动？

1 个答案: