带有角度材料的 IE 中 div 外流的文本答案

【问题标题】：Text flowing outside div in IE with angular material带有角度材料的 IE 中 div 外流的文本
【发布时间】：2017-04-15 21:53:03
【问题描述】：

我在 IE 上使用 angular material 时遇到了这些问题（我使用的是最新版本 edge，其他版本的结果相同（9 ,10,11)

文本在 div 标签外流动

以下是当前包含“任务”项的 div 的 sn-p 代码，这只是 html 和 css（屏幕截图将说明问题）。 （请注意，multilingual-message 是用于多语言文本支持的自定义指令。）

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

Divs（标签）不采用填充和边距，下面是带有样式的 sn-p 代码，使用角度材料指令 'layout-align' 并分配为“space-between stretch”，这将在列中的项目，即使手动添加，标签仍然重叠，填充/边距不起作用。

【问题讨论】：

请提供完整的工作代码sn-p，在IE上运行时显示问题。

标签： css html internet-explorer flexbox angular-material

【解决方案1】：

我尝试了 angular material 疑难解答提示，但对我没有太大帮助，这两个问题是 IE-11 不完全支持的 flexbox 布局的效果，然后经过深入检查 - 在朋友的帮助下 - 我想通了，解决方案是将 -ms-flex: 1 0 30px 添加到 .flex元素的类，其中 30px 表示弹性项目的 prefferedHeight，然后根据您喜欢的每个元素高度更改值。请注意，在我的示例中，您应该始终在 .flex 类之前为当前元素添加一个选择器：

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

【讨论】：