Question

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

代码：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

Answer 1

一种选择是改变将警报集中于下方的方式。这应该使警报水平和垂直居中。

＆＃13;

* {
  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 auto auto -220px;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translateY(-50%);
  -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;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

2 个答案: