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

Question

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

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

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

On IE

On other browsers e.g chrome

Answer 1

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

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

引起的

我查看了文档并找到了以下信息。

When a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element.

引用:

Flex basis Browser compatibility

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

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

flex-basis:auto;

在 IE 11 中的测试结果:

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