Question

HTML =＆GT;

<!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看起来像这样=＆gt;

我需要它看起来像这样（目前适用于chrome / ie8）=＆gt;

我应该改变什么？：）

Answer 1

你需要浮动两个元素并清除它。

<!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>

简要说明：

请原谅我的英语和绘图，但这里简要介绍了浮动和清算在跨浏览器中的工作原理：

元素可以向左或向右浮动。当元素浮动时，元素不会向下推“正常”内容。了解原因 -

漂浮并清除：

alt text
图例：橙色/浮动右侧，蓝色/浮动左侧，灰色线条/清除分隔线，红色矩形/边界

在这种情况下，您有一个行文本的2个元素 - 一个浮动左边，另一个浮动右边。浮动时，它不会向内推动内容，也就是占用空间。因此，如果您不在灰线处使用clear:both，则下面的内容将在2个浮动元素之间向上堆叠，因此可能不是您想要的。

当您在浮点数下方使用clear:both时，浮点数下方的内容将被推到最高高度的浮动元素。这在图的第2和第3部分中显示。

仅限浮动：

alt text
图例：橙色/浮动右侧，蓝色/正常内容，灰色线条/与下一个划分的线条，红色矩形/边界

蓝色普通内容默认为text-align: left;。因此它是左倾的。你需要浮点数在正常内容之前，因为你告诉浏览器从这一行浮动。

你应该尝试不同的条件来看看它的效果：把浮子放在前面，后面，向左浮动，清除两者，向右和向左清除。

Answer 2

对所有IE-Float-Combos总是有用：给每个浮点元素display: inline;

Answer 3

修复后尝试清除：

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

IE7漂浮正确的问题

3 个答案:

简要说明：