I\xe2\x80\x99m 使用 CSS 列在我的网站上获得多列主导航（www.alexanderschlosser.de/wordpress \xe2\x80\x93 使用 Semplice 构建）。在 Chrome 中一切正常，但在 Safari 中列的顶部未正确对齐。知道什么可能导致这个问题吗？_
\n\n这里\xe2\x80\x99是它在Chrome中的样子，并且应该在任何地方都可以看到：\n Chrome渲染
\n\n这里\xe2\x80\x99是它在Safari中的样子（第二列开始变低）：\n Safari 渲染
\n\n更奇怪的是\xe2\x80\x99：当我使用检查器时，Safari 似乎仍然认为元素都在彼此的下面。这可能是问题所在吗？\n Safari Inspector Screenshot
\n\n_
\n\n这里\xe2\x80\x99是我的CSS
\n\n
/***VERTICAL MENU IN TWO COLUMNS***/\nnav.standard ul {\n display: block !important; \n columns: 2;\n -webkit-columns: 2;\n -moz-columns: 2;\n height: 100px !important;\n}\n\n/***DISTANCE BETWEEN MENU ELEMENTS***/\nnav.standard ul li {\n padding-bottom: 15px !important;\n}\n\n/***STYLING MENU ITEMS***/\n.navPrimary a {\n background-image: linear-gradient(to bottom, #252526, #252526);\n background-position: left 0 bottom 0;\n background-repeat: repeat-x;\n background-size: 2px 1px;\n}\n我的 HTML 被简化了
\n\n<nav class="standard">\n <ul class="menu">\n <li class="navPrimary">\n <a href="http://www.alexanderschlosser.de/wordpress/"><span>All Projects</span></a>\n </li>\n <li class="navPrimary">\n <a target="_blank" href="http://blog.alexanderschlosser.de"><span>Blog \xe2\x86\x92</span></a>\n </li>\n <li class="navPrimary">\n <a href="http://www.alexanderschlosser.de/wordpress/about"><span>About Me</span></a>\n </li>\n <li class="navInactive">\n <a href="http://www.alexanderschlosser.de"><span>Alexander Schlosser</span></a>\n </li>\n <li class="navSecondary\xe2\x80\x9c>\n <a href="mailto:mail@alexanderschlosser.de"><span>mail@alexanderschlosser.de \xe2\x86\x92</span></a>\n </li>\n <li class="navSecondary">\n <a target="_blank" href="tel:004917657807152"><span>0049 176 57 80 71 52 \xe2\x86\x92</span></a>\n </li>\n </ul>\n</nav>\n_
\n\n非常感谢瑞士，祝您一切顺利！亚历克斯
\n好吧，看来我\xe2\x80\x99终于想出了一些办法。添加这个似乎对我有用：
\n\nnav.standard ul li {\n page-break-inside: avoid;\n break-inside: avoid;\n -webkit-column-break-inside: avoid; \n}\n但仍然不知道为什么这是有效的。Safari 试图在列之间打破什么？不能是边距或填充，因为在元素之间根本没有任何距离的情况下问题仍然会发生。
\n