javascript - Chrome/Webkit inline-block 刷新问题

Question

我发现的问题如下:

情况:我的整体 div 有一个 inline-block展示。它里面有两个元素，有一个 inline-block也显示。

然后我添加(感谢 JavaScript)一个 <br/>在两个元素之间。第二个转到下一行，这是正常行为。

有问题的部分:<br/>然后被删除(再次是 JavaScript)并且......显示不会改变。看起来整体div的box没有重新计算。最后我有两个相似的标记，但它们的显示方式不同(这有点问题，不是吗)。

它在 Firefox 上运行良好(它似乎是基于 webkit 的，因为 Android 浏览器的行为方式相同)。所以我的问题是，是否有一种不使用会改变 DOM 的方法的解决方法？使用的库是 jQuery。

一个测试用例 here .

编辑: 按照 duri 的建议，我在 webkit bugzilla 中填写了错误报告，它是 here .但我仍在寻找解决方法 ;)

Answer 1

按照我的发现:从整个 DIV 中删除所有子项，然后附加除 BR 之外的所有子项:

function removeBr(){
    var ahah=document.getElementById("ahah");
    var childs=[],child;
    while(child=ahah.firstChild) {
        if(!child.tagName||child.tagName.toLowerCase()!=='br')
            childs.push(child);
        ahah.removeChild(child);
    }
    for(var i=0;i<childs.length;i++)
        ahah.appendChild(childs[i]);
}

http://jsfiddle.net/4yj7U/4/

其他变体:

function removeBr(){
    var node=$("#ahah")[0];
    node.style.display='inline';
    $("#ahah").children("br").remove(); 
    setTimeout(function(){node.style.display='';},0);
}