移除和读取一个元素会将另一个元素向下推，在开发工具中切换浮动会将元素移回正确的位置

Removing and readding an element pushes another element down, toggling the float in dev tools causes the element to move back to the correct position

本文关键字：元素 开发工具 位置 读取 下推 另一个 一个      更新时间：2023-09-26

我有一个容器，里面有三个元素。一个向左浮动，另一个居中浮动，最后一个向右浮动。如果我把中间的项移走再加回去，最右边的项就会被往下推，我也不知道为什么。

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

这在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>

在上面，我清除了所有内容并重新绘制，我也尝试过离开左和右元素，只是删除/添加中心，但我得到了相同的结果。

你可以通过强制重新绘制右边的元素来解决这个问题。有几种方法可以做到这一点，但我最喜欢的方法是$(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;
}

原来的SO帖子，我得到了我的答案，当我遇到一个类似的问题，前几天:强制DOM重绘/刷新Chrome/Mac

相关文章：