Chrome/Webkit problema inline-block de actualización

El problema que nos encontramos es la siguiente:Chrome/Webkit problema inline-block de actualización

Situación: Tengo div general que tiene una pantalla inline-block. En su interior hay dos elementos que también tienen una pantalla inline-block.

Luego agrego (gracias a JavaScript) un <br/> entre los dos elementos. El segundo pasa a la siguiente línea, que es el comportamiento normal.

Pieza de error: Se quita el <br/> (JavaScript otra vez) y ... la pantalla no cambia. Parece que el cuadro de div global no se vuelve a calcular. Al final tengo dos marcas similares que no aparecen de la misma manera (lo cual es un poco problemático, ¿no?).

Funciona bien en Firefox (parece ser basado en webkit ya que el navegador de Android se comporta de la misma manera). Entonces mi pregunta es, ¿hay alguna solución que no use métodos que alteren el DOM? La biblioteca utilizada es jQuery.

Un caso de prueba here.

EDIT: Según lo sugerido por duri, llené un informe de error en webkit bugzilla, es here. Pero todavía estoy en busca de una solución ;)

Fuente

2011-09-02 Py.

Interesante. Reemplazar completamente el 'div' funciona - http://jsfiddle.net/4yj7U/2/. Tengo curiosidad por saber cuál es la razón detrás de este comportamiento. – pimvdb

Cambiando CSS 'style.display' para _div # ahah_ de' inline-block' a 'inline' workarounds this bug for Chrome. Es importante que tengas un valor de visualización de 'bloque en línea' para _div # ahah_? –

Por favor, considere completar un error en la bugzilla de Webkit. – duri

manera lo que he encontrado: eliminar todas niño de DIV en general, y luego añadir todos excepto 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/

Otra variante:

function removeBr(){ 
    var node=$("#ahah")[0]; 
    node.style.display='inline'; 
    $("#ahah").children("br").remove(); 
    setTimeout(function(){node.style.display='';},0); 
}

Fuente

2011-09-02 11:25:09

Tuve esa también, usa mucho DOM añadiendo/eliminando para mí. –

Segunda variante. No es excelente, pero funciona. –

Suena mejor para mí. –

Como solución alternativa, puede establecer el estilo en display: block cuando lo desee en líneas individuales y volver a inline-block cuando quieras que sean amigos.

He creado una JS Fiddle example

que demuestra esta revisión:

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

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

Fuente

2011-11-29 15:12:49 Fenton

todavía existe Este error, por lo que aquí es otra solución: http://jsfiddle.net/4yj7U/19/

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

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

Esto hace que Chrome volver a hacer el se expande y muestra de forma adecuada.

Fuente

2013-03-25 16:01:56 biphobe

Chrome/Webkit problema inline-block de actualización

Respuesta

Cuestiones relacionadas