打印

RG1003: LI 元素设置标记类型的特性 'style-list-type' 的 'disc | circle | square' 三个特性值在各浏览器中的渲染方式不同

作者:钱宝坤

标准参考

请参考 W3C CSS 2.1 规范说明中的 'list-style' 部分:http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type

问题描述

LI 元素设置标记类型的特性 'style-list-type' 的 'disc | circle | square' 三个特性值在各浏览器中的渲染方式不同。

造成的影响

不同浏览器中 LI 标记前的 mark 字符渲染效果不一致。

受影响的浏览器

所有浏览器  

问题分析

根据 W3C 规范说明:'disc | circle | square' 这三个图形的渲染样式由客户端浏览器具体决定。 因此各浏览器内显示效果存在不同。

解决方案

建议放弃使用 'disc | circle | square' 这三个样式,改用背景图片代替样式显示。

例如:

li {
  background:url(....) no-repeat 0 50%;
  padding-left:1em;
}

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.5.6
Opera 10.10
Chrome 4.0.266.0 dev
Safari 4.0.4
测试页面:  
本文更新时间: 2010-07-21

关键字

LI style-list-type disc circle square 列表 列表样式类型 外观