ul与li应用样式及其兼容性

<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
</ul>

list-style-type：

　　list-style-type:none;

list-style-image:

　　示例：

<style type="text/css">
    ul{
        list-style-image:url(bullet.png);
}
</style>

移除list左边的间隔：　

　　要移除list左边的间隔，只需要对ul设置padding-left:0和margin-left:0即可，对ul的设置会是的li自动继承这些样式。

<style type="text/css">
    ul{
        list-style-image:url(bullet.png);
        padding-left:0px;
        margin-left:0px;
}
</style>

 

（IE8）              （IE6）

由此可见，在IE8下，如果把padding和margin都设置为0后，list-style-image也无法显示了。list-style-image是作为背景出现的，如果我们既要缩小左边缩进，又要显示出list-style-image，唯一的办法是将padding-left:(list-style-image的宽度)。效果如下图所示（IE8与IE6的效果还是有细微的差别）

注：margin永远都是透明的（也就是说能看到父容器的背景），而且能为负值。padding可以赋予background-color和background-image。所以为了让list-style-image显示出来，我们应该设置padding，而不是margin。

<style type="text/css">
    ul{
        list-style-image:url(bullet.png);
        padding-left:17px;
        margin-left:0px;
}
</style>

（IE8）

（IE6，虽然比没有使用padding-left的缩进更小了，但是任然有缩进且该缩进大于list-style-image的宽度）

其实CSS2.1开始，便增加了对list的marker的控制，那就是list-style-position属性。默认情况下，IE6-8都是把marker作为outside来处理的，所以上面的例子才会出marker不见了的情况，如果我们显示指定list-style-position:inline，那么上面的那种情况便不会有了。如下：

<style type="text/css">
    *{
        margin:0;
        padding:0;
        border:none;
}
    ul{
        list-style-image:url(bullet.png);
        list-style-position:inside;
}

</style>

<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>

 IE8

IE6

虽然没有指定padding-left，marker照样还是显示出来了。为什么？就是因为list-style-position:inline。浏览器默认是list-style-position:outline。

转载于:https://www.cnblogs.com/ifshe/archive/2011/08/17/2143065.html