问题: 如果使用溢出:隐藏在列表内的元素上(在“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/
问题:怎么了?如何防止这种情况?
最佳答案
找到下一个解决方案:
- 隐藏标记
- 创建自己的标记使用 :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/
关于html - 列表和溢出的奇怪行为 : hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25704847/