css - IE9 浮动问题

问题描述

问 题

很奇葩的问题，元素在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;
}

解决方案

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

这篇关于css - IE9 浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！