Safari 中的 CSS 列未对齐答案

【问题标题】：CSS Columns not aligned in SafariSafari 中的 CSS 列未对齐
【发布时间】：2018-04-14 01:33:07
【问题描述】：

我正在使用 CSS 列在我的网站上获得多列主导航（www.alexanderschlosser.de/wordpress - 使用 Semplice 构建）。在 Chrome 中一切正常，但在 Safari 中列的顶部没有正确对齐。知道可能导致问题的原因吗？ _

这是它在 Chrome 中的外观，应该在任何地方都可以看到： Chrome Rendering

这是它在 Safari 中的外观（第二列开始变低）： Safari Rendering

更奇怪的是：当我使用检查器时，Safari 似乎仍然认为元素都在彼此之下。这可能是问题吗？ Safari Inspector Screenshot

这是我的 CSS

/***VERTICAL MENU IN TWO COLUMNS***/
nav.standard ul {
    display: block !important; 
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    height: 100px !important;
}

/***DISTANCE BETWEEN MENU ELEMENTS***/
nav.standard ul li {
    padding-bottom: 15px !important;
}

/***STYLING MENU ITEMS***/
.navPrimary a {
    background-image: linear-gradient(to bottom, #252526, #252526);
    background-position: left 0 bottom 0;
    background-repeat: repeat-x;
    background-size: 2px 1px;
}

我的 HTML 也简化了

<nav class="standard">
    <ul class="menu">
        <li class="navPrimary">
            <a href="http://www.alexanderschlosser.de/wordpress/"><span>All Projects</span></a>
        </li>
        <li class="navPrimary">
            <a target="_blank" href="http://blog.alexanderschlosser.de"><span>Blog →</span></a>
        </li>
        <li class="navPrimary">
            <a href="http://www.alexanderschlosser.de/wordpress/about"><span>About Me</span></a>
        </li>
        <li class="navInactive">
            <a href="http://www.alexanderschlosser.de"><span>Alexander Schlosser</span></a>
        </li>
        <li class="navSecondary“>
            <a href="mailto:mail@alexanderschlosser.de"><span>mail@alexanderschlosser.de →</span></a>
        </li>
        <li class="navSecondary">
            <a target="_blank" href="tel:004917657807152"><span>0049 176 57 80 71 52 →</span></a>
        </li>
    </ul>
</nav>

在此先感谢您，瑞士祝您一切顺利！亚历克斯

【问题讨论】：

标签： css

【解决方案1】：

好吧，看来我终于想通了。添加这个似乎对我有用：

nav.standard ul li {
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid; 
}

仍然不知道为什么这是有效的。 Safari 试图在列之间打破什么？不能是边距或填充，因为在元素之间根本没有任何距离的情况下仍然会出现问题。

【讨论】：

【解决方案2】：

在我的情况下，问题出现在列项目上的margin，所以当我删除它时一切都很好。此外，display: flex 的项目解决了问题，而无需从项目中删除 margin

【讨论】：