IE 8 错误?元素卡入到位

IE 8 bug? Elements snapping into place

本文关键字：元素 错误 IE      更新时间：2023-09-26

我在IE 8的页面上使用CSS时遇到了一些问题。我有一个文本字段浮动在左侧，一个"下一步"按钮浮动在右侧，下面我有一个单独的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错误可以解决此问题？我尝试过清除浮标，以及其他一些明显的浮标，但没有运气。

希望你能帮到忙

，对不起，代码太长了，

蛇形

看起来您所需要的只是两个浮动元素下方的清除元素。您还粘贴了一些无效的 CSS，所以我已修复它以匹配您的 HTML。

<div id="code_bit">...</div>
<br style="display: block; clear: both;" />
<div id="bottom_bit">...</div>

一个工作的例子可以在jsFiddle中看到： http://jsfiddle.net/kTyaj/

相关文章：