Javascript Chrome/Webkit内联块刷新问题

我发现的问题如下：

情况：我有一个整体div，它有一个

内联块

显示。在它里面有两个元素，它们也有一个

内联块

显示

然后我在两个元素之间添加了一个

（感谢JavaScript）。第二行转到下一行，这是正常行为

错误部分：然后删除

（再次使用JavaScript）并。。。显示器没有改变。似乎没有重新计算整个div的框。最后，我有两个类似的标记，它们的显示方式不同（这有点问题，不是吗）

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

一个测试用例

---

编辑：根据duri的建议，我在webkit bugzilla中填写了一份bug报告，它是。但我仍然在寻找一种解决方法（代码）

我发现的方法：从整个DIV中删除所有child，然后附加除BR之外的所有child：

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

---

作为一种解决方法，您可以将样式设置为

display:block

，当您希望它们出现在单独的行上时，将样式设置为

inline block

，当您希望它们成为朋友时，将样式设置为

inline block

我创建了一个

它演示了此修复：

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

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

---

此错误仍然存在，因此这里有另一个解决方法：

---

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

很有趣。完全更换

div

可以工作-。我很想知道这种行为背后的原因是什么。将div的CSS

style.display

从

inline block

更改为

inline

解决了Chrome的这个bug。对你来说，有一个很重要的代码：<代码> >内嵌块显示值DIV.AAHAH。请考虑在WebKIT的BugZILA中填充一个bug。@安得烈：是的，它需要我使用的布局（它比测试用例复杂得多））这是一个只在第一次工作的修复：我也有一个。对我来说，它使用了大量的DOM追加/删除。当

样式。显示

更改为

内联

，然后返回到

内联块

时，这会导致页面内容闪烁。是的，但这是一个小缺点。当屏幕方向改变时（在手机/平板电脑上），我需要这种改变，所以用户可能不会注意到。

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

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

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

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