Проблемы с обновлением встроенного блока Chrome/Webkit

Я обнаружил следующую проблему:

Ситуация. У меня есть общий div с дисплеем inline-block. Внутри это два элемента, которые также имеют дисплей inline-block.

Затем я добавляю (благодаря JavaScript) a <br/> между двумя элементами. Второй идет к следующей строке, что является нормальным поведением.

Багги: <br/> затем удаляется (JavaScript снова) и... дисплей не изменяется. Похоже, что поле полного div не пересчитывается. В конце концов, у меня есть две аналогичные разметки, которые не отображаются одинаково (что немного проблематично, не так ли).

Он отлично работает в Firefox (похоже, это вебкит, поскольку браузер Android ведет себя одинаково). Поэтому мой вопрос заключается в том, есть ли обходной путь, который не использует методы, которые изменят DOM? В библиотеке используется jQuery.

Тестовый пример здесь.

EDIT: Как было предложено duri, я заполнил отчет об ошибке в webkit bugzilla, здесь здесь. Но я все еще ищу обходное решение ;)

Ответ 1

В чем я нашел: удалите все дочерние элементы из общего DIV, а затем добавьте все, кроме BR's:

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

Ответ 2

Как работа, вы можете установить стиль display: block, когда вы хотите их на отдельных линиях, и вернитесь к inline-block, когда вы хотите, чтобы они были друзьями.

Я создал Пример скрипта JS

Что демонстрирует это исправление:

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

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

Ответ 3

Эта ошибка все еще существует, поэтому здесь еще один способ: http://jsfiddle.net/4yj7U/19/

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

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

Это заставляет Chrome повторно отображать промежутки и отображать их правильно.