一个内部编号的列表样式导致布局问题，当内容是块在非webkit浏览器

Question

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

list-style: decimal inside none;

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

谁有解决方案修复CSS工作在非webkit浏览器?

网站如下，见右侧菜单:http://mattsnider.com/styleguide/html/

所有CSS应用于LI:

.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;
}

所有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 documentation: https://bugzilla.mozilla.org/show_bug.cgi?id=36854

您在这里有选项....您可以将锚点设置为display:inline-block，并更改text-align和text-indent，同时将选定的边框交换为列表元素。很难完全分辨，但这些选项在firefox中确实对我有用。