刪除和讀取元素會向下推另一個元素，在開發工具中切換浮動會導致元素移回正確位置

Question

我有一個容納三個物品的容器。 一個漂浮在左邊，另一個漂浮在中心，最后一個漂浮在右邊。 如果我刪除中心項目並將其添加回去，最右邊的項目將被下推，我也不知道為什么。

如果您選擇了正確的項目並在Chrome開發者工具中查看，則可以將float：切換為正確/不正確，然后將其正確定位。

在Chrome中會發生這種情況，而在FireFox中不會發生。 （我尚未在IE中測試過）

我在這里有此問題的演示： http : //codepen.io/anon/pen/rVyRmy?editors=001

 var on = true; var l = $('<div class="left"></div>'); var r = $('<div class="right"></div>'); var clicky = function() { if (on) { $('.container').empty(); $('.container').append(l); $('.container').append($( '<div class="fill">' + '<span>text</span>' + '<span>text</span>' + '<span>text</span>' + '<span>text</span>' + '</div>' )); $('.container').append(r); on = false; } else { $('.container').empty(); $('.container').append(l); $('.container').append($('<input type="text" />')); $('.container').append(r); on = true; } $('.right').on('click', clicky); }; $('.right').on('click', clicky); 

 .container { width: 400px; height: 20px; text-align: center; background-color: lightgray; } .left, .right { display: inline-block; width: 14px; } .left { position: relative; float: left; } .left:before { position: absolute; top: 4px; left: 4px; content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 8.7px 5px 0; border-color: transparent orange transparent transparent; } .right { position: relative; float: right; } .right:before { position: absolute; top: 4px; right: 4px; content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent orange; } span { width: 93px; background-color: green; display: block; float: left; } div span:first-child { margin-left: 14px; } 

 <div class="container"> <div class="left"></div> <input type="text" /> <div class="right"></div> </div> 

在上面的代碼中，我清除了所有內容並重新繪制，我還嘗試過離開左側和右側元素，而只是移除/添加中心，但是得到的結果相同。

Answer 1

您可以通過在正確的元素上強制重畫來解決此問題。 有兩種方法可以做到這一點，但我的首選方法是$(r).hide().show(0);

$(r).offsetHeight已知可以工作，盡管它在您鏈接到的codepen中不起作用，並且在safari中也不起作用。 對於背景，我添加了如下代碼：

else {
  $('.container').empty();
  $('.container').append(l);
  $('.container').append($('<input type="text" class="middle" />'));
  $('.container').append(r);
  $(r).hide().show(0);
  on = true;
}

前幾天遇到類似問題時從中得到答案的原始SO帖子： 在Chrome / Mac上強制DOM重新繪制/刷新