Question

我使用可下载的官方虚拟机here在Internet Explorer上修复我的布局。

我目前正在使用带有Internet Explorer 11的Windows 7.不幸的是，我的布局没有居中。这就是它应该是这样的：

 +--------------+
 |              |
 |   +------+   |
 |   |      |   |
 |   |      |   |
 |   +------+   |
 |              |
 +--------------+

这就是我在IE11中看到的：

 +--------------+
 |              |
 |      +------+|
 |      |      ||
 |      |      ||
 |      +------+|
 |              |
 +--------------+

我使用的代码用于居中模式：

后台css：

  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      display: -ms-flexbox;
      -ms-flex-pack: center;

居中框css：

  .box {
      background: $white;
      align-self: center;
      width: 550px;
      margin: auto;
      padding: $padding $padding 0 $padding;
      line-height: 1.4em;

      &--gray-background {
          background: $gray;
      }

      &--small {
          max-height: 720px;
      }

      &--big {
          max-height: 100%;
      }

      &--no-width {
          width: auto;
      }

      &--no-pad {
          padding: 0;
      }
  }

这是HTML：

....
<div class="modal">
    <div class="box box--no-pad">
    <!-- modal content -->
    </div>
</div>

我认为问题是＆＃34;证明 - 内容＆＃34;因为如果我删除IE上的那个属性，但是我不明白为什么我必须这样做：IE应该支持它...

编辑：如果我改变了属性

flex-direction: row;

到

flex-direction: column;

在modal css类中，如链接答案中所示，我得到以下结果：

 +--------------+
 |              |
 |              |
 |   +------+   |
 |   |      |   |
 |   |      |   |
 |   +------+   |
 +--------------+

模态现在水平居中，但不是垂直居中。

Flexbox：Internet Explorer中的justify-content属性

0 个答案: