我主页上的 Flexbox 在 IE 11 上无法正常工作

Question

我的客户向我报告了一个问题，即 flexbox 在主页（WordPress 站点）上的产品卡部分不起作用 https://hailinpower.com/

这是 Chrome 上的样子：截图：

这是它在 IE 11 上的样子： IE 11 屏幕截图：

我已经搜索了解决方案，但无法修复它。我试着给 flex 容器设置一个 height: 589px，也给 flex children div，但是没用...

我已将自定义 CSS 代码添加到此部分，如下所示：

.home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col {

    display: flex;
    flex-direction: column;
    flex: 1;
}

此自定义 CSS 代码可能是导致此问题的原因？

Answer 1

更改您的自定义设置css

.home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col {

display: flex;
flex-direction: column;
flex: 1;
}

flex: 1 到 flex-grow: 1

我在 IE11 的调试面板上完成了它并且它有效，请参见下面的图像

我主页上的 Flexbox 在 IE 11 上无法正常工作

Flexbox on my home page not working properly on IE 11

css

wordpress

flexbox

internet-explorer-11