Question

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

以下是它在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试图在列之间打破什么？不能是边距或填充，因为问题仍然发生在元素之间没有任何距离。

Answer 2

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

CSS专栏未在Safari

2 个答案: