html - 定位元素的 IE/Edge 问题

Question

我有两个样式为表格单元格的 div 元素。页脚上有两个按钮。当我单击按钮时，它们不会停留在它们在 Microsoft Edge 浏览器中应该位于的位置。

其他浏览器一切正常。

这是代码块示例:

.table {
  display: table;
}
.table-cell {
  display: table-cell;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  width: 50%;
  background: #eee;
  border-right: 10px solid #fff;
  padding: 15px;
  height: 100%;
}
.buttons {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

<div class="table">
  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Magni facilis explicabo at quos fugit natus mollitia facere, eos, ea inventore porro voluptate doloremque in sed cupiditate accusamus nisi sapiente quas.
  </div>

  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic?
    <div class="buttons">
      <button>Clear</button>
      <button>Go</button>

    </div>
  </div>
</div>

Answer 1

好吧，我自己解决了这个问题!如果有人遇到类似问题，请执行以下操作: 1. 首先将您的内容包装在显示器内的辅助 div 中:table-cell div 2. 将 position: relative 和 height: 100% 设置为新的包装 div

问题解决了! 更新代码:

.table {
  display: table;
  height: 300px;
}
.table-cell {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  width: 50%;
  background: #eee;
  border-right: 10px solid #fff;
  padding: 15px;
}
.content {
  position: relative;
  height: 100%;
}
.buttons {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="table">
  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores!
  </div>

  <div class="table-cell">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic?
      <div class="buttons">
        <button>Clear</button>
        <button>Go</button>
      </div>
    </div>
  </div>
</div>