내가 디자인하고있는 페이지에는 텍스트 형식의 입력이 하나있는 양식이 있습니다. 일반적으로이 양식과 입력은 Chrome의 브라우저에서 제대로 렌더링되지만 가끔 왼쪽에 약 20 픽셀 렌더링됩니다. 페이지를 새로 고침하면 원래의 정확한 위치로 돌아갑니다.페이지를 새로 고칠 때 양식 입력이 때때로 움직이게됩니까?
저는 지금까지 크롬에서만 테스트했기 때문에 브라우저 간 문제는 아닙니다 (동일한 브라우저에서 발생합니다). 아래 코드에 문제가 있습니까?
여기 내 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;
}
http://validator.w3.org 및 http://hsivonen.iki.fi/doctype을 확인하십시오. – BalusC