Javascript 移除和读取一个元素会向下推另一个元素，在dev工具中切换float会使元素移回正确的位置

我有一个能装三样东西的容器。 一个向左浮动，另一个居中，最后一个向右浮动。如果我删除中心项目并将其添加回最右边的项目被向下推，我不知道为什么

如果您选择了正确的项目并在Chrome开发工具中查看它，您可以切换float:right off/on，然后它将被正确定位

这在Chrome中发生，但在FireFox中不会发生。（我还没有考过IE）

我在这里演示了这个问题：

var on=true；
var l=$（''）；
var r=$（''）；
var clicky=函数（）{
如果（打开）{
$（'.container'）.empty（）；
$（'.container'）。追加（l）；
$（'.container'）。追加($(
'' +
“文本”+
“文本”+
“文本”+
“文本”+
''
));
$（'.container'）。追加（r）；
开=假；
}否则{
$（'.container'）.empty（）；
$（'.container'）。追加（l）；
$（'.container'）。追加（$（''）；
$（'.container'）。追加（r）；
开=真；
}
$（'.right'）。在（'click'，clicky'）；
};
$（'.right'）。在（'click'，clicky'）
.container{
宽度：400px；
高度：20px；
文本对齐：居中；
背景颜色：浅灰色；
}
.左，.右{
显示：内联块；
宽度：14px；
}
.左{
位置：相对位置；
浮动：左；
}
.左：以前{
位置：绝对位置；
顶部：4px；
左：4px；
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：5px 8.7px 5px 0；
边框颜色：透明橙色透明；
}
.对{
位置：相对位置；
浮动：对；
}
.对：以前{
位置：绝对位置；
顶部：4px；
右：4px；
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：5px 0 5px 8.7px；
边框颜色：透明橙色；
}
跨度{
宽度：93px；
背景颜色：绿色；
显示：块；
浮动：左；
}
分区跨度：第一个孩子{
左边距：14px；
}
您可以通过在右侧元素上强制重画来解决此问题。有几种方法可以做到这一点，但我更喜欢的方法是
$（r）.hide（）.show（0）

$（r）.offsetHeight
已知是有效的，尽管它在您链接的代码笔中不起作用，在safari中也不起作用。作为背景，我添加了如下代码：

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

else{
$（'.container'）.empty（）；
$（'.container'）。追加（l）；
$（'.container'）。追加（$（''）；
$（'.container'）。追加（r）；
$（r）.hide（）.show（0）；
开=真；
}

前几天遇到类似问题时，我从原始SO帖子中得到了答案：
非常感谢！这似乎解决了问题。