0

我正在尝试彻底了解浏览器的行为，并且目前特别浮动。

使用以下简单代码，我希望 div 浮动到文本的左侧：

<span>Some span (inline) text</span>
<div class='a'>Floated div</div>​

使用以下CSS：

div.a {
    background-color: red;
    width:100px;
    float:left;
}

在大多数浏览器上，它符合我的预期，但在 IE7 上，span 文本出现在一行上，浮动 div 出现在下一行 - 请参阅以下 jsfiddle：http: //jsfiddle.net/FtYYZ/

有人可以解释一下浏览器布局方面发生了什么吗？我的理解是“将浮动元素从正常流程中取出并放置在左侧或右侧”。我原以为没有什么会从第一行的末尾采取正常的流程，所以浮动应该保持在那一行，就像大多数浏览器一样。IE 行为背后的逻辑是什么？

谢谢你的帮助！

4

1 回答 1

0

老实说，IE 7 只占浏览器份额的 1%。

为了处理这个问题，我会将以下内容放在你的身体元素中。

  <!--[if lt IE 8]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. 
 Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a   
href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a>
 to improve your experience.</p>
    <![endif]-->

无需鼓励使用 IE 7。

于 2013-06-21T16:36:46.553 回答