列计数拆分填充底部到下一列

Question

在 Chrome 和 Safari 中，列计数将列表项的底部填充拆分为下一列。 “a”上的Display:inline-block; 修复了这个问题，但是我失去了全角背景悬停效果。

我尝试将填充重写为边距，但由于某种原因display:block; 在计算拆分时不计算填充或底部边距。

这个问题有解决办法吗？

Codepen：http://codepen.io/roachdesign/pen/rOqjNM

Answer 1

将break-inside 的规则从ul 移至li。

改变这个：

header nav ul li.menu-item-25 ul {
    ...
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    ...
}

收件人：

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

您修改后的 codepen：http://codepen.io/Abhitalks/pen/YyJNQJ

原因是，您希望列项避免从内部而不是列容器破坏自己。