浮动元素在IE中的UL中浮动输入下方 - 但它在Chrome中很好

Question

我一直在研究这个问题大约一个小时了，我不能为我的生活确定为什么会在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 toop tip元素会低于我的input字段。

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

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

就好像UL上有一些右手填充，但我在UL上尝试margin:0和padding:0进行测试，但是没有用。

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

Answer 1

我离开使用花车，对于一般布局来说，它们是不必要的邪恶。使用浮动可以将浮动元素从文档流中取出，只要它们可以很容易地实现而不这样做。

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

我已经完全剥离了＆＃39;漂浮＆＃39;和＆＃39;清除＆＃39;超出我的CSS，除了我可能想要一些文字环绕图像的时间。我非常确定这是float最初的用途。