html - Firefox 的 CSS 定位

我已经检查了几个网站上的帖子,包括 stackoverflow
但无法看到像我这样的类似问题。

我有一个带有一些 div 容器的页面,它们将输入框和
让他们看起来不错。

问题:
虽然在 safari/opera/chrome 上一切看起来都不错,但盒子变得很奇怪
火狐 上。

我发布了正确的 html 和 css 部分以及完成页面的 url 和
一张图片,正确和错误的版本是什么样的。

我会很高兴,如果有人能解决我的一般错误,那么我就可以
将来避免它。

感谢您阅读:)

<div id="inner_content_big">
    <div style="width: 900px; margin: 0 auto; ">
        <div class="box_login_banner">
            <h1>Login, Welcome :]</h1>
        </div>
        <div style=" clear: both; "></div>
        <div class="box_login_container">
            <?
            $data_form['class'] = 'form_login';
            ?>
            <?= form_open( 'user/login', $data_form ); ?>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Email</h4>
                    </div>
                    <input type="input" name="login_username" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>This is the address you specified while registering.</h5>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Password</h4>
                    </div>
                    <input type="password" name="login_password" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>Please remember that the password is <u>case sensitive</u>.</h5>
                    </div>
                </div>
            </div>
            <?= form_close(); ?>
        </div>
        <div class="box_login_right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur laborum.
</div>
        <div style="float: left; ">
            <a class="css_button steelblue" href="#" id="button_submit">
                <span>Login</span>
            </a>
            <a class="css_button pink" href="#download" id="button_forgot_password">
                <span>Forgot your Password?</span>
            </a>
        </div>
        <div style="float: right; margin-right: 6px; ">
            <a class="css_button orange" href="#" id="button_no_account">
                <span>No account?</span>
            </a>
        </div>
        <?php if ( @$error_message != '' ): ?>
        <div class="redcssboxes box_login_infobox">
            <p>
                <img src="<?= base_url(); ?>images/header/error.png" />
                <?= $error_message; ?>
            </p>
        </div>
        <?php endif ?>
    </div>


.box_login_banner {
    float: left;
    margin-left: -26px;
    width: 939px;
    height: 50px;
    border-bottom: 1px solid #DDD;
}

.box_login_banner h1 {
    font-size: 28px;
    color: #888;
    margin-left: 30px;
    margin-top: -12px;
}


.box_login_container {
    float: left;
    margin-top: 40px;
    height: 200px;
    width: 440px;
}

.box_login_right {
    float: right;
    margin-top: 40px;
    margin-right: 14px;
    height: 200px;
    width: 420px;
}

.box_login_inputs {
    width: 888px;
    height: 100px;
    margin-top: -26px;
    margin-right: 0px;
}

.box_login_container #input_label {
    margin-left: 4px;
    width: 300px;
    height: 30px;
}

.box_login_container #input_label h4 {
    color: #888;
    font-weight: bold;
}

.box_login_container #input_container {
    float: left;
    margin-top: 10px;
    margin-left: 20px;
    width: 400px;
    height: 120px;
}

.box_login_container #input_container input {
    margin-top: -5px;
}

.box_login_container #input_hint {
    margin-top: -10px;
    margin-left: 4px;
    width: 100%;
    height: 20px;
}

.box_login_container #input_hint h5 {
    font-size: 12px;
    color: #999;
}


#login_special_input {
    color: #777;
    font-size:26px;
    width:97%;
    margin-top:2px;
    margin-right:6px;
    margin-bottom:16px;
    border:1px solid #e5e5e5;
    background:#fbfbfb;
    padding:3px;
}

最佳答案

删除 .box_login_container #input_container 的 {float:left} Prop 会给你想要的结果

更新和更正 fiddle :http://jsfiddle.net/Zg7tH/1/

记住 class 和 ids 的建议

原因:
.box_login_inputs{ margin-top: -26px;} --> 导致它向上滑动和 .box_login_container #input_container {float:left} --> 使其与之前的元素一起流动