css ul li 的使用及浏览器兼容问题

当我们为ul元素添加背景或框架时，其原本的样子就会显现出来。在Internet Explorer（IE）中，项目符号被置于ul元素之外，因此ul的宽度计算并不包括项目符号（如图1所示）。而在Firefox（FF）中，项目符号被包含在ul元素的宽度之内（如图2所示）。这种对CSS解释的差异导致了在不同浏览器中呈现出不同的效果。

在实际应用中，我们通常会首先重置样式，即进行CSS重置（如图3所示）。通过设置margin和padding为0，你可能会发现项目符号消失了。当你添加list-style-position:inside属性后，项目符号又会重新出现（如图4所示）。

list-style-position属性决定了列表项目标记的位置。当设置为outside时，列表项目标记被放置在文本之外，且文本不会根据标记进行对齐。而当设置为inside时，列表项目标记被放置在文本内部，文本会根据标记进行对齐。

在IE浏览器中，当li元素浮动后，项目符号可能不会显示，而在FF中则显示正常。由于我们经常需要隐藏项目符号，因此IE中的这个BUG通常可以忽略。但需要注意的是，一定要设置list-style-type为none，否则在FF中仍然可能出现项目符号。

还有一个值得关注的属性是display:list-item。这个属性可以将块对象指定为列表项目，并可以添加可选的项目标志。它可以说是ul和li的简化版，可以在div和p元素中设置为列表显示，并为列表项目添加符号。

通常我们不会使用默认的项目符号，因为不同浏览器对其位置和大小的渲染存在差异，且无法精确控制其位置。我们通常通过为li元素设置背景图像来模拟项目符号，例如使用background-image:url()no-repeat属性。

至于狼蚁网站的SEO优化，它采用了特定的系统样式来处理项目符号，即使用list-style-type属性。网站还通过其他技术手段来提升用户体验和搜索引擎可见性。在浏览网站内容时，用户可能会遇到由cambrian.render('body')生成的各种动态内容和交互效果。这些技术共同为狼蚁网站创造了一个丰富、功能强大的在线平台。