以文本方式查看主题

-  ╋艺 镇╋  (http://wdystv.com/bbs/index.asp)
--  ┣◇网站建设&Web语言  (http://wdystv.com/bbs/list.asp?boardid=4)
----  list-style在ie7和ff的差别  (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=3688)

--  作者:admin
--  发布时间:2012/12/29 17:52:22
--  list-style在ie7和ff的差别

本来想做个新闻列表的,结果有一些列表项的小问题困扰:

先写下结构:
……
<title>新闻列表</title>
<link rel="stylesheet" href="css1/lina5.css" type="text/css" />
</head>

<body>
<ul id="list">
<li><a href="http://try0212.blog.sohu.com" title="笨笨的blog">笨笨的blog</a></li>
<li><a href="http://try0212.blog.sohu.com" title="温故知新">温故知新</a></li>
<li><a href="http://try0212.blog.sohu.com" title="一文一字">一文一字</a></li>
<li><a href="http://try0212.blog.sohu.com" title="油盐酱醋">油盐酱醋</a></li>
<li><a href="http://www.shoyao.com" title="中国搜医搜药网——医药资讯网站"><span /></ul>
</body>
……

css代码:
* { font-size: 14px; margin:0; border:0;}整体
#list{ width:500px; margin:5px auto; border:1px solid #f00;}指定ul宽,居中,1px红色边框。

此时默认的list-style为黑色圆点。但在ie7和ff中显示的却不一样。截图如下:

在#list中加入list-style-position:inline,ie7和fff都向右移动。但不令人满意。截图如下:

去掉list-style-position:inline,写为padding-left:5px,效果虽然在ie7下不能看到圆点,但估计是因为是处在ul之外的,和ff的不同之处就是ie7下不能看到。再改为padding-left:20px,效果就出来了。截图如下:

也许还有不到之处,顺便请高手指正。


http://blog.163.com/try0212@126/blog/static/52867370200792563713568/
[此贴子已经被作者于2012-12-29 17:53:25编辑过]