css - Primeflex Flexgrid 是否支持 IE11？让 flexgrid 在 IE 上运行的任何解决方法？

Question

使用“p-dir-col”的列对齐方式在 IE11 中未按预期显示。

要重现，请查看在 Internet Explorer 11 中打开的演示页面： https ://www.primefaces.org/primeng/#/flexgrid

=> IE 中的每一行之间没有空格，而列在 Chrome 中正确显示。

在 IE 上

在其他浏览器上，例如 chrome

Answer 1

我尝试访问 PrimeNG 站点并尝试使用 Chrome 和 IE 11 浏览器检查该示例。

我用它做了一些测试，发现这个问题是由flex-basis引起的

我检查了文档，并在下面找到了信息。

当指定非自动 flex-basis 时，Internet Explorer 10 和 11 始终使用内容框框模型来计算 flex 项的大小，即使 box-sizing:border-box 应用于元素。

参考：

Flex 基础浏览器兼容性

在这里，如果您使用开发人员工具检查该网格上flex-basis的值，您会发现它被设置为0px

要解决 IE 浏览器的问题，您需要设置flex-basis: auto如下所示。

flex-basis:auto;

IE 11 中的测试结果：

作为一种解决方法，用户可以创建他们的自定义 CSS 类并使用网格在 IE 中正确显示，因为用户无法在第三方实用程序中进行任何更改。