Question

我正在尝试彻底了解浏览器行为，并且此刻专门浮动。

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

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

使用以下css：

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

在大多数浏览器上它都能达到我的预期效果，但在IE7上，跨度文本出现在一行上，下一行是浮动div - 请参阅以下jsfiddle：http://jsfiddle.net/FtYYZ/

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

感谢您的帮助！

Answer 1

老实说，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使用。

内联元素和浮点运算不符合预期

1 个答案: