繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css ul li 的使用及浏览器兼容问题
- CSS样式表
- css ID类和class类的长命名与短命名
- CSS background-position的使用说明详解
- 利用CSS定位背景图片 background-position
- CSS 多图片融合背景定位的应用于优缺点分析
- CSS实现的图片宽高自适应固定边框
- css 背景图片定位在菜单效果中的应用实例
- CSS 速记口诀 可以解决一些常见问题
- CSS 多浏览器兼容性问题及解决方案
- css 行级元素在多浏览器下的宽度问题 与解决方法
- IE下行框高度的问题
- CSS 实现的图片宽高自适应固定边框
- css的核心内容 标准流、盒子模型、浮动、定位等分析
- CSS 超出隐藏实现限制字数的功能代码(多浏览器)
- Div+CSS 布局入门教程之二 构建网站
- CSS 网页布局中文排版的9则技巧
- CSS网页布局25个实用小技巧
- 网页制作 默认Web字体样式
- IE与Firefox的CSS兼容大全 推荐
- css 非表格垂直对齐效果代码
- css cursor 的可选值（鼠标的各种样式）
CSS样式表 中的 css ul li 的使用及浏览器兼容问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 226 ::
收藏到网摘: n/a
如果我们给 ul 加上一个背景或者框架，它就会露出原形，也就是在 IE 中项目符号是在 ul 外面，所以 ul 的宽度是不把项目符号算在里面的（如下图1）；而 FF 是把项目符号算在 ul 里面的（下图2）。这样对 CSS 解释的差异就导致了在不同浏览器中会产生不同的效果。
在实际应用中，我们会先把样式重置-css reset（如上图3）。把 margin:0;padding:0; 后会发现项目符号不见了。添加 list-style-position:inside; 后项目符号又回来了（如上图4）。
list-style-position:outside: 列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inside: 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
li 浮动后，项目符号在 IE 下不会显示，但在 FF 下显示正常。不过我们经常需要的效果是不让显示项目符号，所以这个 IE BUG 可以基本不管啦。但是一定要设置 list-style-type:none; 要不然你会发现在 FF 中依然会出现项目符号的。
这里介绍一个属性 display:list-item; 将块对象指定为列表项目，并可以添加可选项目标志，也就是 ul/li 的简化版，在 div 和 P 中可以设置为列表显示，并且可以为列表项目添加符号。
通常我们不会用默认的项目符号，因为浏览器的不同，它的位置和大小在各个浏览器中的渲染也是有差异的，而且它不能精确定位，所以一般我们都是通过对 li 设置图片背景 backgroud-image: url() no repeat; 来模拟项目符号的。
下面是项目符号的系统样式：list-style-type
评论 (0) All
