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

【问题标题】：an inside numbered list-style causing layout issue when content is block in non-WebKit browsers当内容在非 WebKit 浏览器中被阻止时，内部编号的列表样式会导致布局问题
【发布时间】：2013-05-03 05:24:19
【问题描述】：

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

list-style: decimal inside none;

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

任何人有修复 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;
}

所有 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;
}

【问题讨论】：

WebKit 似乎是根据规范做错了...你能列出你应用到列表的完整 CSS 规则以及标记吗？
那很好，你知道CSS让它在其他浏览器中表现得像WebKit吗？

标签： css

【解决方案1】：

那是一个 13 岁的虫子……很好的发现！注意：https://developer.mozilla.org/en-US/docs/CSS/list-style-position 文档：https://bugzilla.mozilla.org/show_bug.cgi?id=36854

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

【讨论】：