浮动元素低于 IE 中 UL 中的浮动输入 - 但在 Chrome 中很好答案

【问题标题】：Floated Elements falling below floated input within UL in IE - Yet it's fine in Chrome浮动元素低于 IE 中 UL 中的浮动输入 - 但在 Chrome 中很好
【发布时间】：2013-12-16 19:38:28
【问题描述】：

我已经为此工作了大约一个小时，但我无法确定为什么会在 IE 中发生这种情况。

我有以下 HTML 来显示我的注册表单（摘录）：

<ul id="register_form_list">
    <li><label for="register_full_name" class="register_label">Full Name</label></li>
    <li class="input_wrapper">
        <input type="text" class="register_text_input" name="full_name" id="register_full_name" value="">
        <div class="register_field_help">
            <span class="register_field_error_text" style="display: none">Enter your first and last name</span>
        </div>
            <div class="register_field_error">
        <span class="register_field_error_text">Please enter your full name</span>
    </div>
    </li>
</ul>

我有以下 CSS，用于显示我的注册元素和我创建的“工具提示”：

ul#register_form_list { float: left; clear: left; margin: 25px 0 0 29px; width: 670px; }
ul#register_form_list li { float: left; clear: left; display: inline; margin-left:0px; }
ul#register_form_list li.input_wrapper { padding: 0 0 15px 0; }
label.register_label { float: left; font-size: 0.9em; font-weight: bold; color: #093C5D; text-decoration: none; }
ul#register_form_list input.register_text_input { float: left; clear: left; margin: 6px 0 0 0; padding: 5px; width: 260px; border: #B0B0B0 1px solid; background: #FFFFFF url(images/quizmaker/field_shadow_bg.png) repeat-x; background-position: top; outline: none; font-family: Arial, sans-serif; }
ul#register_form_list input.register_submit { float: left; clear: left; margin: 0 0 0 0; padding: 5px 14px 5px 14px; }
div.register_field_help { float: left; display: none; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_help.png) top left no-repeat; }
span.register_field_help_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }
div.register_field_error { float: left; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_error.png) top left no-repeat; }
span.register_field_error_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }

由于某种原因，当我希望它们并排显示时，正在显示的 div.register_field_error 顶部提示元素低于我的 input 字段。

它在 Chrome 中运行良好，我的 ul 中有足够的宽度来容纳工具提示（670 像素），但我必须在开发人员工具中将 ul 调整为 width: 733px 或更多以使它们出现在 IE 中并排显示。

代码为live here，无需填写任何输入元素，只需点击“注册”，每个输入元素都会出现工具提示。

好像 UL 上有一些右手边距，但我在 UL 上尝试过 margin:0 和 padding:0 进行测试，但没有奏效。

当我使用 IE11 模拟 IE7 时，似乎会发生此问题。我希望该网站在 IE7 中工作

【问题讨论】：

What do you mean?
请查看我添加到问题中的屏幕截图。 IE11也是这样吗？
我链接的截图来自 Windows 8.1 上的 IE11，它与 IE9 仿真看起来也一样。
我已将“文档模式”设置为 7，因为它说这是默认设置：/。这不是正确的设置吗？如果我将它设置为“Edge”，它会看起来很好。
Edge 是 'IE11' 模式。那么在IE7中似乎是一个问题。

标签： html css internet-explorer css-float

【解决方案1】：

我不再使用浮动，它们对于一般布局来说是不必要的。使用浮点数可以将您的浮动元素从文档流中移除，而无需这样做就可以很容易地实现它们。

我现在使用display: inline-block 和display: table 进行布局，例如我提供的示例。

我已经从我的 CSS 中完全去除了“浮动”和“清除”，除了我可能希望一些文本环绕图像的时候。我很确定这就是 float 最初的用途。

【讨论】：