0

我的博客上有一个设计，它使用以下 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;
}
4

1 回答 1

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 中对我有用。

于 2013-05-02T21:24:19.170 回答