IE7浮点右问题
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看起来像this=>
我需要它看起来像这样(工作在chrome/ie8在目前)=>
我应该改变什么？:)
回答 3
Stack Overflow用户
发布于 2009-11-30 22:02:39
您需要将两个元素都浮动并清除它。
<!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>简要说明：
请原谅我的英文和绘图，但这里简要介绍了浮动和清除如何在跨浏览器中工作：
元素可以向左或向右浮动。当你让元素浮动时，元素不会将“正常”的内容向下推。明白为什么-
浮动和清除：
图例:橙色/向右浮动、蓝色/向左浮动、灰色线条/清除分隔线、红色矩形/边界
在本例中，一行文本有两个元素-一个向左浮动，另一个向右浮动。当浮动时，它不会将内容向下推，也就是占用空间。因此，如果您不在灰色线条上使用clear:both，下面的内容将在两个浮动元素之间向上堆叠，因此可能不是您想要的内容。
当您在浮点数下面使用clear:both时，浮点数下面的内容将被推送到最高高度的浮点数元素。这在图表的第二部分和第三部分中显示。
仅浮动：
图例:橙色/向右浮动，蓝色/正常内容，灰色线条/与下一条直线一起分割的线条，红色矩形/边界
蓝色的普通内容默认情况下已经是text-align: left;。因此，它是面向左侧的。你需要浮动在普通内容的前面，因为你告诉浏览器从这一行开始浮动。
你应该尝试不同的条件来看看它的效果:把浮动放在前面，后面，浮动左边，右边，清除两个，清除右边和左边。
Stack Overflow用户
发布于 2009-11-30 22:13:32
总是帮助所有的IE-Float-Combos:给每个float-element一个display: inline;
Stack Overflow用户
发布于 2009-11-30 22:20:35
尝试clear after修复：
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}https://stackoverflow.com/questions/1820007
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号