由于各个浏览器对css的解释不同，list-style在各浏览器调试的时候经常会遇到各种各样的问题，我一般习惯在css开头就定义list-style:none;，全部用背景解决，免得麻烦。
最近遇到要做排行榜，一排下来四五十个，做个背景吧，图太大，不好，想想决定用有序列表做，本来这就应该是有序列表ol的任务。可惜，在各个浏览器的调试时遇到n多问题，最大的困扰了我一天的问题就是在ie下面，没有序号，或者有序号，但都是1.，郁闷了，找了好久的资料都没头绪，最后在蓝色看到一个帖子的回复，解决了这个问题。li下面不能有height，定义了height就出现序号全部是1.的情况。
ok，我写了个自认为还算简洁的代码拿出来分享。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd";
>
<html
xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title> 各浏览器有序列表样式兼容研究
</title>
<meta
name="keywords"
content="有序列表，list-style，css兼容，css hack"
/>
<meta
name="description"
content="各浏览器有序列表样式兼容研究"
/>
<style>
body{font:12px tahoma,sans-serif;color:#000;margin-top:100px;}
*{margin:0;padding:0;}
a:link,a:visited{color:#005FA9;text-decoration:none;}
a:active,a:hover{color:#005FA9;text-decoration:underline;}
.rank{width:300px;margin:0 auto;border:1px solid #CCC;}
h1,li{border-bottom:1px solid #CCC;}
h1{font-size:14px;height:22px;background:#FE4;padding:5px 0 0 15px;}
li{
padding:5px;
list-style-type:decimal;/*样式为数字序号*/
list-style-position:inside;/*样式显示在box内部*/
color:#015B56;}
/*直接定义p的样式减少标签和代码，这里出现了多个浏览器的不兼容，需要hack*/
li p{
float:right;
margin:-15px 5px 0 0;/*适合所有浏览器*/
_margin:-22px 5px 0 0;/*ie6及以下专用*/
#margin:-22px 5px 0 0;/*ie7下专用*/
}
/*以下opera专用*/
@media all and (min-width:0px){
li p{margin-top:1px;padding-right:20px;}
}
</style>
</head>
<body>
<div
class="rank">
<h1>有序列表 - 序号测试
</h1>
<ol>
<li><a
href="#">有序列表
</a><p>88888
</p></li>
<li><a
href="#">css兼容
</a><p>77777
</p></li>
<li><a
href="#">css hack
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>77777
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
<li><a
href="#">明天会更好
</a><p>6666
</p></li>
</ol>
</div>
</body>
</html>
打印文档
推荐好友 
返回顶部
增大字体 
减少字体