在 IE 中带有角度材质的文本在 div 外部流动

Question

我在 IE 上使用角度材料时遇到这些问题（我正在使用最新版本edge，其他版本（9,10,11）的结果相同

）

1. 文本在 div 标签外部流动

下面是包含“任务”项的当前 div 的代码片段，这只是 html 和 CSS（屏幕截图将演示该问题）。 （请注意，多语言消息是用于多语言文本支持的自定义指令。）

.comp-insp-th .th-cell {
  background: #1e9a9f;
  padding: 10px 5px;
  margin: 5px 0px;
}

<div class="th-cell flex" flex="">
  <multilingual-message message-id="Home.Task" class="ng-isolate-scope">
    <span ng-bind-html="message[CurrentSettings.language] | unsafeHtml">Task</span>
  </multilingual-message>
</div>

2. Div（标签）不采用填充和边距，下面是带有样式的片段代码，使用角度材料指令“布局对齐”并指定为“拉伸之间的空间”，这将在列中的项目之间添加空间，仍然是标签重叠，即使手动添加，填充/边距也不起作用。

Answer 1

我尝试了角度材料故障排除技巧，但它对我没有多大帮助， 这两个问题是 Flexbox 布局的影响，IE-11 并不完全支持 Flexbox 布局，然后经过深入检查 - 在朋友的帮助下 - 我发现解决方案是在

-ms-flex: 1 0 30px

中添加

.flex

元素的类，其中 30px 表示弹性项目的 preferedHeight，然后根据您喜欢的每个元素高度更改值。 请注意，您应该始终在当前元素的 .flex 类之前添加一个选择器，在我的示例中：

.comp-insp-th .th-cell .flex{
  -ms-flex:1 0 30px !important;
}