![使用 CSS 和 IE7 清除浮动?](https://linux22.com/image/1428754/%E4%BD%BF%E7%94%A8%20CSS%20%E5%92%8C%20IE7%20%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9F.png)
我绞尽脑汁想让浮动和清除在旧版本的 Internet Explorer 中正常工作。我读过许多关于使用 .clear:after 技巧等的教程,但什么都做不了!
我有如下 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 吗?
答案1
您尝试做的事情是一个坏主意,因为首先没有人应该在新的 Web 应用程序中花费如此多的努力来支持 IE6;其次您的 HTML 结构不灵活,并且只能在非常特定的场景中起作用。
然而,我很好奇,是否可以仅使用 CSS 而不使用额外的 HTML 来克服经典的 IE6 浮动错误,令人惊讶的是,这似乎是可能的。诀窍是使用 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>
根据以下信息这一页