文字在IE中流动div与角材料

时间:2016-12-01 10:03:24

标签: css html5 internet-explorer flexbox angular-material

我在 IE 上使用角度材料时遇到了这些问题(我使用的是最新版本边缘,其他版本的结果相同(9) ,10,11)

  1. 文字在div标签之外流动 enter image description here
  2. 下面是包含“任务”项目的当前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>

    1. Divs(标签)不带填充和边距,下面是带样式的代码段,使用角度材质指令'layout-align'并指定为“space-between stretch”,这将增加空间在列中的项之间,即使手动添加,标记仍然重叠,填充/边距也不起作用。
    2. enter image description here

1 个答案:

答案 0 :(得分:0)

我尝试了角度材料故障排除提示,但它对我没那么帮助, 这两个问题是flexbox布局的影响,IE-11并不完全支持,然后经过深入检查 - 在朋友的帮助下 - 我弄清楚了,解决方案是将-ms-flex: 1 0 30px添加到{ {1}}元素的类,其中30px表示flex项的 prefferedHeight ,然后根据您预先设置的每个元素高度更改值。 请注意,在我的示例中,您应该始终在当前元素的.flex类之前添加一个选择器:

.flex