Question

我有一个使用angularjs（1.5.5）和角度材质（1.0.5）构建的应用程序。

我使用角度材质的flex布局，但是当我缩放网页时，我在IE11上遇到问题，弹性行相互溢出。

<div ng-cloak ng-app="MyApp">
    <div layout="row" layout-sm="column" layout-md="column">
        <div flex>
            <md-datepicker flex ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
        </div>
        <div flex>
            <md-datepicker flex ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
        </div>
    </div>
    <div layout="row" layout-sm="column" layout-md="column">
        <md-input-container class="md-block" flex>
            <label>Text</label>
            <input ng-model="text">
        </md-input-container>
    </div>
    <div layout="row" layout-sm="column" layout-md="column">
            <md-input-container class="md-block" flex>
                <label>Text 1</label>
                <input ng-model="text">
            </md-input-container>
            <md-input-container class="md-block" flex>
                <label>Text 2</label>
                <input ng-model="text">
            </md-input-container>
            <md-input-container class="md-block" flex>
                <label>Text 3</label>
                <input ng-model="text">
            </md-input-container>
    </div>
</div>

DEMO ：https://codepen.io/anon/pen/wqPBLa?editors=1010

Answer 1

我用这种方式解决了这个问题：

 .layout-row > .flex {
  -ms-flex-basis: auto;
  flex-basis: auto;
}
 .layout-column > .flex {
  -ms-flex-basis: auto;
  flex-basis: auto;
}

角度材料柔性网格系统在IE11中不起作用

1 个答案: