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中的效果是一样的，并且位置也比较好控制。

IE问题——列表项图像,布布扣,bubuko.com