Chrome/Webkit内联块刷新问题

Question

我发现的问题如下：

情况：我的整体 div 具有 inline-block 显示。其中有两个元素也具有 inline-block 显示。

然后我在两个元素之间添加（感谢 JavaScript）
。第二个转到下一行，这是正常行为。

错误部分：然后删除
（再次使用JavaScript）并且...显示不会改变。看来整体div的box没有重新计算。最后，我有两个相似的标记，但它们的显示方式不同（这有点问题，不是吗）。

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

测试用例此处。

编辑：按照duri的建议，我在webkit bugzilla中填写了一份错误报告，它是这里。但我仍在寻找解决方法 ;)

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);
}

Answer 2

作为解决方法，当您希望它们位于单独的行上时，您可以将样式设置为 display: block ，而当您希望它们成为朋友时，可以将样式恢复为 inline-block 。

我创建了一个 JS Fiddle 示例，

它演示了此修复：

function addBr(){
    $('span').css({ display: 'block'});
}
function removeBr(){
    $('span').css({ display: 'inline-block'});
}

$("#add").click(addBr);
$("#remove").click(removeBr);

Answer 3

这个错误仍然存​​在，所以这里有另一个解决方法：http://jsfiddle.net/4yj7U/19/

$("span").css('display', 'none');

setTimeout(function(){
    $('span').css('display', 'inline-block');
}, 0);

这使得 Chrome 重新渲染跨度并正确显示它们。