div css 会员登录表单,关于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{

}

欢迎登录

---

用户名:

密码:

此代码为刚整理的，目标效果如下：在ff上显示正常

但在chrome或者搜狗浏览器webkit模式下显示如下

在考虑两个“按钮”怎么放的时候，用chrome发现用div包裹的label和input，查看时div并没有包裹住这个两个东西：如图

而包裹按钮的div却包裹着第二个label和input：

是否div和input有什么关系？为何有这种现象？chrome的问题？