IE7浮动正确问题
Posted
技术标签:
【中文标题】IE7浮动正确问题【英文标题】：IE7 float right problems 【发布时间】：2010-12-21 15:47:24 【问题描述】：html=>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
<a href="#">foo</a>
<a href="#"style="border-color: blue; float: right;">bar</a>
</div>
something
</body>
</html>
我遇到了 IE7 问题（不需要 IE6 支持）
在 IE7 上呈现的 html 看起来像这样=>
我需要它看起来像这样（目前适用于 chrome/ie8）=>
我应该改变什么？ :)
【问题讨论】：
【参考方案1】：对所有 IE-Float-Combos 总是有帮助：给每个浮动元素一个 display: inline;
【讨论】：
display:inline; for bar 链接不知何故没有帮助。也许我理解错了。
display:inline for the float-element 将（在许多情况下）解决 IE 错误计算的填充和边距值的常见浮动问题。【参考方案2】：
你需要浮动两个元素并清除它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
或者像这样简单地将浮动元素放在普通元素的前面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
简要说明：
请原谅我的英语和绘图，但这里简要介绍一下浮动和清除在跨浏览器中的工作原理：
元素可以向左或向右浮动。当元素浮动时，元素不会向下推动“正常”内容。看看为什么 -
浮动和清除：
图例：橙色/向右浮动、蓝色/向左浮动、灰线/清除分隔线、红色矩形/边界
在这种情况下，一行文本有 2 个元素 - 一个向左浮动，另一个向右浮动。浮动时，它不会将内容向下推，即占用空间。因此，如果您不在灰线处使用clear:both，则下面的内容将在两个浮动元素之间向上堆叠，因此可能不是您想要的。
当您在浮动下方使用clear:both 时，浮动下方的内容将被推送到最高高度的浮动元素。这显示在图表的第 2 和第 3 部分。
仅浮动：
图例：橙色/向右浮动、蓝色/正常内容、灰线/与下一条分割的线、红色矩形/边界
蓝色正常内容已经默认为text-align: left;。因此它是左向的。您需要浮动位于正常内容的前面，因为您告诉浏览器从该行浮动。
你应该尝试不同的条件来观察它的效果：将浮动放在前面，后面，左右浮动，两者都清除，左右清除。
【讨论】：
谢谢。让它工作（第二种方法）。有什么更深入的解释为什么会这样？ 我会尝试解释但请原谅我的英语 =) IE6 和 7 都这样做了，这是由它们令人震惊的吱吱作响的布局引擎造成的——它从来没有考虑到 CSS 构建，它仍然显示，即使在 IE8 中也是如此。这里的第二个选项（将 float:right 元素放在首位）可能是最常见的。【参考方案3】：修复后尝试清除：
div:after
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
【讨论】：
试过这个没有成功。也许做错了什么。无论如何 - 让它工作。以上是关于IE7浮动正确问题的主要内容，如果未能解决你的问题，请参考以下文章
为啥浮动元素中的浮动 <input> 控件在 IE7 中向右滑动太远，而在 Firefox 中却没有？