Question

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

其他浏览器的一切都还可以。

这是代码块示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

好吧，我自己解决了这个问题！如果有人有类似问题，请执行以下操作： 1.首先将内容包装在显示器内的辅助div中：table-cell div 2.使位置：相对和高度：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>

定位元素的IE / Edge问题

1 个答案: