列表和溢出的奇怪行为：隐藏

Question

问题： 如果使用溢出：隐藏在列表内的元素上（内部＆＃34; li＆＃34;标记），会发生一些奇怪的事情。

HTML：

<ul class="test">
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
</ul>

CSS：

ul {
    list-style-position: outside;
}

a {
    display: block;
}

ul.test a {
    overflow: hidden;
}

有效结果：

IE 8-11中的结果：

链接背后有一些差距。

Chrome中的结果：

列表标记消失。

示例：http://jsfiddle.net/er1hsabb/2/

问：错了什么？怎么防止这个？

Answer 1

更改此内容：

ul.test a {
    overflow: hidden;
}

到此：

ul.test li {
    overflow: hidden;
}

解决了IE上的间距问题，看起来与Chrome相似。工作JS FIDDLE

并添加list-style-position: inside;解决了Chrome的list-style问题。参考this fiddle

Answer 2

找到下一个解决方案：

1. 隐藏标记
2. 创建自己的标记使用：在
之前

添加了CSS：

ul.test {
    list-style: none;
    padding-left: 0;
}

ul.test li {
    position: relative;
    padding-left: 40px;
}

ul.test li:before {
    content: "●";
    position: absolute;
    left: 20px; 
}

请参阅：http://jsfiddle.net/er1hsabb/6/

所有这些都适用于Opera，FF，Chrome和IE 8 +。

＆＃34;标记＆＃34;默认情况下，尺寸较大，但可能会更改为CSS：http://jsfiddle.net/er1hsabb/7/