列表元素空隙问题的解决方法

2022-07-15 80酷酷网 80kuku.com

解决|问题今天看了一个网页中有一个列表在IE中与在FF中的表现不太正确，哪一个是正确的，不是太清楚，后来才明白是IE的问题，FF表现是正确的。我写了一个简略版本的如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表元素空隙问题</title><style type="text/css"></style></head><body><br /><br /><br /><div><ul><li><a href="#">dfdfdfdf fd</a></li><li><a href="#">dfdf fd</a></li></ul></div></body></html>

分析：IE中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。可参见：#18
修正的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表元素空隙问题</title><style type="text/css"></style></head><body><br /><br /><br /><div><ul><li><a href="#">dfdfdfdf fd</a></li><li><a href="#">dfdf fd</a></li></ul></div></body></html>

总结：从以上看，可以遇到这种LI内有块元素时，我们可以把高度的样式放在块元素里，而不要在LI中直接定义它的样式了。