About the problem with css user login forms

94 1

This is a simple form, but it seems like a variety of obstacles:
Source code

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<TITLE>管理系统登录</TITLE>
<style type="text/css">
div #formDiv{ 
 margin:0 auto;
}
 div #all
 {
 text-align:center;
 background-color:#EED2EE;
 }
div #main
 {
 margin:0 auto;
 height:150px;
 width:300px;
 background-color:#E0FFFF;
 text-align:center;
 margin-top:150px;
 }
div #content
 {
 background-color:#FFFFFF;
 text-align:center;
 margin:0;
 padding:0;
 }
hr{
 margin:0;
 padding:0;
}
h1{
 margin:0;
 padding:0;
}
form{
 margin:0 auto;
 padding:4px;
 width:270px;
}
label{
 float:left;
 width:80px;
 text-align:right;
 color:#54e;
}
#username,#password{
 float:left;
 margin:1px;
 padding:1px;
 font-family:Arial;
 font-size:12px;
 color:#666666;
 clear:right;
}
.rowForm{
 clear:both;
}
#buttonDiv{
}
</style>
</HEAD>
<body>
 <div id="all"> 
 <div id="main">
 <div id="content"><h1>欢迎登录</h1><hr/></div>
 <br/>
 <div id="formDiv">
 <form action="__URL__/checkLogin" method="post">
 <div class="rowForm">
 <label for="username">用户名:</label>
 <input type="text" name="username" id="username"/>
 </div>
 <div class="rowForm">
 <label for="password">密码:</label>
 <input type="password" name="password" id="password"/>
 </div>
 <div id="buttonDiv">
 <input type="submit" name="submit" value="登录" id="submit"/>
 <input type="reset" name="reset" value="重置" id="submit"/>
 </div>
 </form>
 </div>
 </div>
 </div>
</body>
</html>

This code is just sorted, and the goal is as follows: Show normal on ff.
But display the following in chrome or browser web kit mode
When you think about two"buttons", use chrome to find the label and input with the div wrapped, and see when the div doesn't wrap the two things: Figure diagrams
The div of the package button wraps the second label and input:
Whether the div and input have a relationship? Why do you've this? chrome is problem.

1 Answers

103 2

It's because clear: both is wrong, clear can't clear the interior floating, only from outside.
As long as you move it down, you can:

#buttonDiv{
 clear: both;
}
...