IE9 浮动问题

Question

很奇葩的问题，元素在IE，firefox中换行显示，但在chrome中正常。
chrome中效果图

firefox和IE效果图

<div class="login">
        <h2>登&nbsp;录&nbsp;系&nbsp;统</h2>
        <form action="">
            <div>
                <label for="name">用户名</label>
                <input type="text" name="name" autofocus>
            </div>
            <div>
                <label for="password">密&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" name="psw">
            </div>
            <div>
                <label for="code">验证码</label>
                <input type="text" name="code" id="code">
            </div>
            <button id="submit">登录</button>
        </form>
    </div>

css样式如下

.login div {
    border-bottom: 1px solid #FFF;
    width: 400px;
    margin: 40px auto;
}

.login label {
    width: 48px;
    float: left;
    clear: left;    
}

.login input {
    outline: none;
    background-color: transparent;
    margin-left: 50px;
    width: 400 - 48 - 50px;
}

Answer 1

服了你。你在三个样式里都添加border:1px solid #00ff00看看。

Answer 2

https://jsfiddle.net/lincenying/n3gn4obo/1/

仅测试chrome和ie9

Answer 3

发现几个问题，你可以给label加个背景色看看，密码两个字中间空格太多了，导致宽度超过48px，然后label和input想要在一行可以都使用float:left，此时就要去掉input的margin-left:50px了。因为这个会导致label和input中间产生50px（可能你的意思是input距离最左边50px）

Answer 4

感谢各位的解答。发现是浏览器默认样式的原因(chrome的input默认没有水平padding，而firefox和IE默认有)。
由于声望不够，连点赞都不行。[无奈]