Chrome下float的bug一则

@hax 2015-08-21 11:27:49发表于 hax/hax.github.com 笔记

float一直是浏览器bug的重灾区。今天确认了Chrome浏览器中存在一个严重的float的bug。定位和调试过程就略了。直接看我精简到最小的testcase。

<div>
    text
    <div id="r" style="float: right">right</div>
</div>

只要空间足够,右浮动的内容应该和 text 在同一行,即如下效果:

text                right

然而当我们有如下脚本

function test() {
    var s = document.getElementById('r').style
    s.float = s.float ? null : 'right'
}

执行两次test()本应不变,但是实际效果变成了:

text
                    right

上述bug可在360se 7(Chrome 31)里重现。不过最新版的Chrome已经修复了。

然而新版Chrome其实仍然存在这个bug,只是触发条件更苛刻了一点点:

<div>
    <div id="l" style="display: inline">text</div>
    <div id="r" style="float: right">right</div>
</div>
function test() {
    var s = document.getElementById('l').style
    s.display = s.display ? null : 'inline'
    s = document.getElementById('r').style
    s.float = s.float ? null : 'right'
}

以上。