题

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;

我应该改变什么？ ：）

有帮助吗？

解决方案

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

<!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，则下面的内容将在2个浮动元素之间向上堆叠，因此可能不是您想要的。

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

仅限浮动：


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

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

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

其他提示

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

修复后尝试清除：

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top