Question

此代码在Webkit（chrome）中可以正常工作，但在firefox中没有，第二个跨度会下降，你知道为什么吗？

<div id="sbar">
    <span id="status">Some Text</span>
    <span id="mlog" style="float: right;">Some text in the right</span>
</div>

Answer 1

尝试倒转两个跨度。

<div id="sbar">
    <span id="mlog" style="float: right;">Some text in the right</span>
    <span id="status">Some Text</span>
</div>

Answer 2

是的...倒车使得它起作用浮动，你需要安排你的元素就像一个浏览器可以拿起的堆栈 -

所以左边浮动

A

乙

C

将浮动到ABC -

A

AB

ABC

当所有浮动权利都会给你CBA，如

A

BA

CBA

我见过这个在firefox中实现，还没有检查过webkit。不过，你可以安全地使用它。

Answer 3

此代码在Webkit（chrome）中可以正常工作，但在firefox
中不行

WebKit错了。标准规定了右浮动必须沿着一条线。

有关说明，请参阅CSS: Three Column Layout problem。

Answer 4

此代码在Webkit中可以正常工作（chrome）但不是在firefox中第二个跨度会下降，你知道吗？为什么呢？

是。浮动元素的行为将落在代码之前的非浮动元素之下。其他人已经给你修复了。

Answer 5

可以提出其他解决方案而无需逆转。它确实可以在不同的浏览器中使用

<div id="sbar" style="position:relative;">
    <span id="status">Some Text</span>
    <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span>
</div>

浮动跨度为何下降？

5 个答案: