CSS 列在 Safari 中未对齐

Question

我正在使用 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>

_

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

Answer 1

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

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

仍然不知道为什么这会起作用。 Safari 试图在列之间打破什么？不能是边距或填充，因为问题仍然存在，元素之间根本没有任何距离。