Question

我查看了几个网站上的帖子，包括stackoverflow
但是没能像我一样看到类似的问题。

我有一个带有一些div容器的页面，它们分开输入框和
让他们看起来很好。

问题：
虽然在safari / opera / chrome上看起来一切都很好，但盒子却很奇怪在 firefox 。

我发布了正确的html和css部分以及完成页面的网址和
正确和错误版本的图片。

如果有人能让我了解一般错误，我会很高兴，所以我可以将来要避免它。

感谢您阅读:)

<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;
}

Answer 1

删除.box_login_container #input_container的{float：left}道具会给你想要的结果

更新并更正了小提琴：http://jsfiddle.net/Zg7tH/1/

记住关于班级和ids的建议

原因：

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

Answer 2

login_special_input，input_container等是ID。

您不能在两个不同的元素上使用相同的ID。将它们更改为类。

使用Firefox进行CSS定位

2 个答案: