Question

我在IE 8的页面上遇到了一些问题。我有一个文本字段浮动到左边，一个“下一个”按钮浮动到右边，下面我有一些文本在一个单独的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;
}

如您所见，这两个元素已经浮动。当您第一次查看此页面时，表单元素下面的文本将被包装在表单元素之间，然后在几秒钟后，它会捕捉到应该存在的位置。

是否有任何可以解决此问题的IE 8错误？我已经尝试清除浮子，以及其他一些没有运气的明显浮子。

希望你能提供帮助，并为长代码感到抱歉，

Snakespan

Answer 1

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

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

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

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

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

IE 8的bug？元素攫取到位

1 个答案: