使用CSS和IE7清除浮动？[关闭]

-3

我一直在敲打我的脑袋一天试图获得浮动并清除在旧版本的Internet Explorer中正常工作。我已经阅读了许多关于使用.clear的教程：在技巧之后等等但是我无法得到任何实际工作！

我有这样的HTML：

<div id="section">
  <h2>Section Title</h2>

  <label for="name">Name</label>
  <input type="text" id="name" />

  <label for="dob">Date of Birth</label>
  <input type="text" id="dob" />

  <label for="email">Email</label>
  <input type="text" id="email" />
</div>

和CSS这样：

#section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px;}
#label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
#input{float: left; margin-bottom: 10px;}

在现代浏览器中，例如Opera 25，显示如下：

Name            [Name field]
Date of birth   [Date of birth field]
Email           [Email]

在旧版本的Internet Explorer（6或7）中，它显示为：

Name            [Name field] [Date of birth field] [Email field]
Date of birth
E-mail

我不想调整我的HTML，任何人都可以帮我修复CSS吗？

— 克雷格约翰斯通
source

我会改变HTML。我的意思是，为了<label for="name">Name</label> <input type="text" id="name" /> </div style="clear:both;" ></div>

— 戴夫

谢谢，我知道我可以通过在HTML中添加额外的DIV来解决这个问题，但我很想避免这种情况，除非没有其他选择。

— Craig Johnstone 2014年

这是stackoverflow.com的问题，你在那里有一个帐户。

— Sacha K 2014年

@CraigJohnstone：你有没有机会从我的答案中测试代码？我很确定这是做你要求的唯一方法。在IE 6/7中未正确处理浮动元素，这就是需要这些变通方法的原因。此外，我的解决方案的优势在于除IE6和IE7之外的所有浏览器都将忽略该变通方法。

— James P

@SachaK，谢谢 - 我完全同意。我不确定这最终会如何超级用户。我没有听说过超级用户到现在为止，我想我是张贴在计算器，直到我注意到您的评论，并检查了URL。

— 克雷格约翰斯通2014年

你要做的是一个坏主意，因为首先没有人应该在新的Web应用程序中付出这么多努力来支持IE6，其次你的HTML结构不灵活，只能在非常特定的情况下工作。

但是，我很好奇，看看经典的IE6浮动错误是否可以纯粹用CSS克服而且没有额外的HTML，而且令人惊讶的是它似乎有可能。诀窍是使用IE的CSS表达式将<br>元素注入文本框后的页面。

在模拟IE6和IE7时，以下代码在IETester中为我工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px; display: block; zoom: 1}
            label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
            input{
                float: left;
                margin-bottom: 10px; 
                *zoom: expression(this.runtimeStyle.zoom="1", 
                    this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif");
            }
        </style>
    </head>
    <body>
        <div id="section">
            <h2>Section Title</h2>

                <label for="name">Name</label>
                <input type="text" id="name" />


                <label for="dob">Date of Birth</label>
                <input type="text" id="dob" />


                <label for="email">Email</label>
                <input type="text" id="email" />

        </div>
    </body>
</html>

基于此页面的信息

— 詹姆斯P.
source

谢谢 - 该解决方案运行良好。它没有完全解决在没有添加额外标记的情况下实现它的问题（因为CSS添加了BR），但我找不到任何其他方法 - 所以我猜这是唯一的解决方案。干杯。

— 克雷格约翰斯通2014年