css - 当内容在非 WebKit 浏览器中被阻止时，内部编号列表样式会导致布局问题

Question

我的博客上有一个设计，它使用以下 CSS 对列表进行编号:

list-style: decimal inside none;

在每个 <li> 内元素是显示 block 的 anchor 标记。在 WebKit 浏览器中，这工作得很好。在 FireFox、IE 和 Opera 中，内部 block anchor 的显示被列表样式的宽度向下推。我试过使用填充、边距和文本缩进来修复它，但我没有运气。我无法在外部设置它们的样式，因为我想更改所选元素的 LI 的左边框颜色。我可以将 anchor 标记定位到绝对位置并将其正确定位，但我觉得这里缺少一个简单的修复方法。

有人有修复 CSS 以在非 WebKit 浏览器中工作的解决方案吗？

这是网站，见右边的菜单: http://mattsnider.com/styleguide/html/

应用于 LI 的所有 CSS:

.menu .menu-item:first-child {
    border-top: 0 none;
}
.menu-numbered .menu-item {
    list-style: decimal inside none;
}
.menu-item {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #FFFFFF;
}

应用于 anchor 的所有 CSS:

.menu-item.selected a {
    border-left-color: black;
}
.menu-item a {
    border-left: 2px solid #FAFAFB;
    display: block;
    margin-top: -1em;
    padding: 8px 10px 8px 8px;
    text-shadow: 0 1px 0 #FFFFFF;
}
.l_aside a {
    color: #3D49FF;
}
a {
    opacity: 0.9;
}

Answer 1

那是一个 13 年前的 bug ……不错的发现!备注:https://developer.mozilla.org/en-US/docs/CSS/list-style-position文档:https://bugzilla.mozilla.org/show_bug.cgi?id=36854

你在这里有选项......你可以将 anchor 设置为 display:inline-block 并使用 text-align 和 text-indent ，同时将您选择的边框交换到列表元素。很难完全说清楚，但这些选项在 Firefox 中确实对我有用。