javascript - IE 8 错误？元素卡入到位

Question

我在 IE 8 中的页面上遇到了一些 CSS 问题。我有一个文本字段 float 到左侧，一个“下一步”按钮 float 到右侧，在我下面的单独 div 中有一些文本。

            <div id="code_bit">
            <h2>Enter your 16 digit code</h2>
            <input type="text" name="activation_code" id="activation_code" value="<% $activation_code | h %>" size="16" />
            <input id="next_button" type="button" name="signup" value="Next" onclick="this.form.submit();" />
            </div>
<div id="bottom_bit">
    <div id="service_highlights">
        Some text
    </div>

#bottom_bit {
    width: 616px;
    position: relative;
    margin: 50px auto 30px 215px;
}
#bottom_bit #service_highlights {
    padding: 15px 0px;
    border-bottom: 1px solid #bdbdbd;
    border-top: 1px solid #bdbdbd;
    font-size: 14px;
    color: #000;
    text-align: center;
}

signup_bit input {
    color: #000;
    height: 32px;
    padding: 2px;
    text-align: left;
    margin: 10px 0px 10px 2px;
    float: left;
    display: block;
}
#signup_bit #info{
    width: 350px;   

    text-transform: none;
    font-size: 10pt;
    color: #000000;
    float: left;
}
#signup_bit #activation_code {
    font-size: 20px;
    width: 290px;
    text-transform: uppercase;
    padding: 3px;
}
#signup_bit #next_button {
    background: #fff;
    border: none;
    cursor: pointer;
    color: #63a8d8;
    height: 35px;
    padding: 2px;
    text-align: right;
    float: right;
    text-decoration: underline;
}

可以看到，两个元素已经 float 了。发生的情况是，当您第一次查看此页面时，表单元素下方的文本被包裹在表单元素之间，然后几秒钟后，它会卡入应有的位置。

是否有任何 IE 8 错误可以解决这个问题？我试过清除浮标和其他一些明显的浮标，但没有成功。

希望您能提供帮助，抱歉代码太长

蛇跨

Answer 1

看起来您只需要一个 clearing element在你的两个 float 元素下方。您还粘贴了一些无效的 CSS，因此我已修复它以匹配您的 HTML。

<div id="code_bit">...</div>

<br style="display: block; clear: both;" />

<div id="bottom_bit">...</div>

可以在 jsFiddle 看到一个工作示例:http://jsfiddle.net/kTyaj/