首页 > 代码库 > IE问题——列表项图像
IE问题——列表项图像
等我们实现列表时，经常会遇到一种情况：需要为列表的每一项的前面添加一个列表项图像。
我们在查阅W3C时会发现，在CSS中已经为我们提供了实现方法——“list-style-type”，我们来看看它的实现方法。
方法一(“list-style-type”属性)：
1 ul {2 list-style-type : square;3 list-style-position: inside;4 }
这样做的确能实现添加小方块，其中 的“inside”是为了保证小方块在列表项的内部，对于方块的大小和间距仍然需要额外控制，（注意在设置type后就不要把li的display设置成其他值了），更重要的原因是，css为我们提供的样式有限，不能满足我们丰富的要求。（如果想使用list-style-image添加自己的图片，我们仍然需要去单独控制image的位置，这样做要比单独的一个span或div要麻烦一些。）list-style-type带来的问题不止这些。它是一种不稳定的式样，在IE中对它的解析与chorm会有不同。一般地在chorm中会是一个漂亮小巧的小方点，而在IE中它是一个大方块。这是因为我们并未对它的大小有控制。因此我提倡以下两种方法。
方法二（行内的span）：
1 .listImgDemoBox_1 ul { 2 list-style: none; 3 } 4 5 .listImgDemoBox_1 ul li { 6 height: 20px; 7 font-size: 16px; 8 line-height: 20px; 9 10 }11 12 .listImgDemoBox_1 ul li span {13 display: inline-block;14 width: 3px;15 height: 3px;16 background-color: #000000;17 vertical-align: middle;18 }
即,每一个列表项内都放入行内元素。最前面放入一个span来填充颜色或图像。
方法三（浮动的span）：
.listImgDemoBox_1 ul { list-style: none;}.listImgDemoBox_1 ul li { height: 20px; font-size: 16px; line-height: 20px; padding-left: 10px;}.listImgDemoBox_1 ul li span { display: block; float: left; width: 3px; height: 3px; margin-top: 9px; margin-right: 5px; background-color: #000000; vertical-align: middle;}
即li的padding-left留出空位，再将列表项的图片浮动过去。
方法二和方法三在IE和Chorm中的效果是一样的，并且位置也比较好控制。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。