Chrome/Webkit内联块刷新问题

Chrome/Webkit inline-block refresh problem

本文关键字：刷新 新问题 Webkit Chrome      更新时间：2023-09-26

我发现的问题如下:

Situation:我有一个具有inline-block显示的整体div。里面有两个元素，也有一个inline-block显示。

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

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

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

这里有一个测试用例。

EDIT:根据duri的建议，我在webkit bugzilla中填写了一个错误报告，它在这里。但我仍然在寻找一个解决方案;)

我发现:从整个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);
}

作为一种解决方法，当你想让它们在单独的行上时，你可以将样式设置为display: block，当你想让它们成为朋友时，你可以将样式恢复为inline-block。

我已经创建了一个JS提琴的例子

显示修复:

function addBr(){
    $('span').css({ display: 'block'});
}
function removeBr(){
    $('span').css({ display: 'inline-block'});
}
$("#add").click(addBr);
$("#remove").click(removeBr);

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

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

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

相关文章：