html - 列表和溢出的奇怪行为 : hidden

Question

问题:如果使用溢出:隐藏在列表内的元素上(在“li”标签内)，会发生一些奇怪的事情。

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

找到下一个解决方案:

1. 隐藏标记
2. 创建自己的标记使用 :before

添加的 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+。

“标记”尺寸比默认值大，但它可能从 CSS 更改:http://jsfiddle.net/er1hsabb/7/