Flexbox 布局与 Safari 中的 grid-column-gap 不兼容答案

【问题标题】：Flexbox layout not compatible with grid-column-gap in SafariFlexbox 布局与 Safari 中的 grid-column-gap 不兼容
【发布时间】：2021-04-28 11:49:02
【问题描述】：

在 Elementor 中，我使用的是社交图标组件（多列布局），将其嵌套在部分的列（Flexbox 布局）中。

但是，Safari 无法准确确定其位置，因为当元素嵌套在 Flexbox 布局中时，CSS 属性 --grid-column-gap 没有正确实现。 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#browser_compatibility

Safari 无法识别网格居中时的间隙，因此布局偏离了 4x14 像素。

以下代码来自 Elementor（未经修改），如何使用 Safari 解决此问题？

HTML：

<div class="elementor-widget-wrap ui-sortable">
    <div data-id="fe6279a" data-element_type="widget"
         class="elementor-element elementor-element-edit-mode elementor-element-fe6279a elementor-element--toggle-edit-tools elementor-widget elementor-widget-social-icons elementor-shape-circle elementor-grid-0 elementor-element-editable"
         data-model-cid="c1624" id="" data-widget_type="social-icons.default">
        <div class="elementor-widget-container">
            <div class="elementor-social-icons-wrapper elementor-grid">
                <div class="elementor-grid-item">
                    <a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-animation-push elementor-repeater-item-cd42a4c"
                       href="https://www.linkedin.com" target="_blank">
                        <span class="elementor-screen-only">Linkedin-in</span>
                        <i class="fab fa-linkedin-in"></i> </a>
                </div>
                <div class="elementor-grid-item">
                    <a class="elementor-icon elementor-social-icon elementor-social-icon-xing elementor-animation-push elementor-repeater-item-38c83d4"
                       href="https://www.xing.com" target="_blank">
                        <span class="elementor-screen-only">Xing</span>
                        <i class="fab fa-xing"></i> </a>
                </div>
                <div class="elementor-grid-item">
                    <a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-animation-push elementor-repeater-item-002da7e"
                       href="https://www.twitter.com" target="_blank">
                        <span class="elementor-screen-only">Twitter</span>
                        <i class="fab fa-twitter"></i> </a>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

CSS：

/* Parent element */
.elementor-2503 .elementor-element.elementor-element-08404ae.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap {
    align-content: center;
    align-items: center;
}
.elementor-2503 .elementor-element.elementor-element-08404ae.elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
    justify-content: center;
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Parent element uses Flex layout */
}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
/* Child element*/
.elementor-2503 .elementor-element.elementor-element-fe6279a {
    --grid-template-columns: repeat(0, auto);
    --icon-size: 18px;
    --grid-column-gap: 14px; /* Does not work in Safari */
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-widget {
    position: relative;
}

【问题讨论】：

标签： css flexbox safari elementor css-multicolumn-layout

【解决方案1】：

我的解决方案包括在 Elementor 中禁用 grid-column-gap

并创建这个使用 border-right 的自定义站点范围代码。

.elementor-social-icons-wrapper .elementor-grid-item {
    border-right: 14px solid transparent;
}
.elementor-social-icons-wrapper .elementor-grid-item:last-child {
    border-right: 0px solid transparent;
}

【讨论】：