Question

我发现的问题如下：

情境：我的整体div显示inline-block。里面是两个也有inline-block显示的元素。

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

Buggy部分：然后删除<br/>（再次使用JavaScript）并且...显示不会更改。似乎整个div的框不会重新计算。最后我有两个相似的标记，它们看起来不一样（这有点问题，不是吗）。

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

Answer 2

作为一种解决方法，您可以将样式设置为display: block，如果您希望它们在单独的行中，并在您希望它们成为朋友时还原为inline-block。

我创建了JS Fiddle example

这证明了这个问题：

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重新渲染跨度并正确显示它们。

Chrome / Webkit内联块刷新问题

3 个答案: