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

问题：如果使用overflow：隐藏在列表中的元素（在“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; 
}

有效结果：

valid result

结果在IE 8-11：

IE 8-11 result

链接后面有一些差距。

结果在Chrome：

chrome result

列表标记消失。

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

问题：什么错了？如何防止这一点？

来源

2014-09-06 Enyby

它看起来罚款IE8对我来说，但标志上没有Chrome37 – 2014-09-06 21:22:24

显示我意识到，这是因为中'a {display：block; }声明。看起来Chrome会感到困惑，因为它们在计算宽度区域之外而隐藏标记。使用'list-style-position：inside;'可以解决这个问题。 – 2014-09-06 21:31:19

使用'a {display：inline-block;}' - [JSFiddle]（http://jsfiddle.net/er1hsabb/5/） – Anonymous 2014-09-06 21:31:37

找到一个解决方案：

隐藏标记
创建自己的标记使用：前

新增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/

来源

2014-09-07 08:51:09 Enyby

更改此：

ul.test a { 
    overflow: hidden; 
}

这样：

ul.test li { 
    overflow: hidden; 
}

解决上IE的间隔问题，看起来类似于铬的。工作JS FIDDLE

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

来源

2014-09-06 21:25:28

FF标记在两个链接中都没有。也在Chrome中。和IE 11一样。关于“里面” - 我知道这一点。但是这有其他问题：标记被视为浮动元素。 – Enyby 2014-09-06 21:44:14

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

回答

相关问题