Question

我有一个在chrome中工作100％正确的布局：

但在IE 11或边缘中查看它会显示额外的滚动条，因为该页面现在大于浏览器高度：

HTML：

<body ng-app="MyApp" layout="column" layout-fill>

  <div layout="column" layout-fill>

    <md-toolbar class="md-tall-xl">
      <div class="md-toolbar-tools">
        <h2 class="md-flex">Toolbar </h2>
      </div>
      <md-tabs class="tab-left-padding">
        <md-tab>
          <md-tab-label>Item One</md-tab-label>
        </md-tab>
        <md-tab>
          <md-tab-label>Item two</md-tab-label>
        </md-tab>
      </md-tabs>
    </md-toolbar>    

    <md-content class="visableOverflow bg" layout="row" flex layout-fill layout-margin style="padding:8px;">    

      <md-whiteframe class="md-whiteframe-z1 overTheToolbar working-bg" layout="column" flex>

        <md-content layout="column" layout-margin>

          Lorem ipsum ...

        </md-content>

      </md-whiteframe>   

    </md-content>

  </div>
</body>

的CSS：

 .bg {
      background-color: #E0E0E0;
    }

    md-toolbar.md-tall-xl {
      height: 192px;
      min-height: 192px;
      max-height: 192px;
    }

    .overTheToolbar {
      margin-top: -72px!important;
      z-index: 3;
    }

    .visableOverflow {
      overflow: visible;
    }

    .working-bg {
      background-color: white;
    }

    .tab-left-padding {
      padding-left: 15px;
    }

我试图让IE11 / Edge渲染它与chrome一样，但似乎无法让它工作。如果有问题，我确实检查了https://github.com/philipwalton/flexbugs，但似乎没有与我的问题相关。

有什么想法吗？

以下是codepen：http://codepen.io/qorsmond/pen/aOPPPp

Answer 1

通过将div上的布局填充上的最小高度覆盖为0，我得到了在MS Edge上显示相同的布局，它似乎有效。我只是不知道它为什么会起作用。

div > [layout-fill]{
  min-height: 0;
}

http://codepen.io/qorsmond/pen/vObxae

chrome和IE11 / Edge中的布局不一致

1 个答案: