时间戳

首页 > 解决方案 > 内联表在 IE 上无法正常工作

javascript - 内联表在 IE 上无法正常工作

问题描述

我有一个包含一些内容的弹出框，并使用 CSS 属性display:inline-table;来根据内容自动高度弹出框。它可以在 Chrome 上运行，但不能在 IE 上运行（在 IE 中它位于左侧）。任何其他方法来管理具有适当高度的盒子高度？

代码：

* {
  box-sizing: border-box;
}

.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6)
}

.alert {
  width: 440px;
  height: auto;
  display: inline-table;
  background: #ffffff;
  border-bottom: 3px solid #31a3dd;
  border-top: 3px solid #31a3dd;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  -moz-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  position: absolute;
  padding: 10px;
}

.content {
  float: left;
  width: 100%;
  background: #f0f7ff;
  border: 1px solid #e7e7e7;
  padding: 10px;
}
<div class="popup">
  <div class="alert">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>

小提琴：https ://jsfiddle.net/f4xn134v/

标签： javascripthtmlcss

解决方案

我刚刚display: inline-table从 .alert 类中删除并更改了：top: 30%; bottom: auto;

* {
  box-sizing: border-box;
}

.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6)
}

.alert {
  width: 440px;
  height: auto;
  background: #ffffff;
  border-bottom: 3px solid #31a3dd;
  border-top: 3px solid #31a3dd;
  margin: auto;
  top: 30%;
  left: 0;
  right: 0;
  bottom: auto;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  -moz-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  position: absolute;
  padding: 10px;
}

.content {
  float: left;
  width: 100%;
  background: #f0f7ff;
  border: 1px solid #e7e7e7;
  padding: 10px;
}
<div class="popup">
  <div class="alert">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>

推荐阅读