手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css ul li 的使用及浏览器兼容问题
css ul li 的使用及浏览器兼容问题
摘要:如果我们给ul加上一个背景或者框架,它就会露出原形,也就是在IE中项目符号是在ul外面,所以ul的宽度是不把项目符号算在里面的(如下图1);...

如果我们给 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

【css ul li 的使用及浏览器兼容问题】相关文章:

css的字体属性详解

css返回顶部图标固定在浏览器右下角且兼容ie6

不同浏览器兼容的CSS编码准则

ie6,7下空DIV无任何内容时占据空间问题解决

clear:both 的作用介绍

css中用javascript判断浏览器版本

ie placeholder属性的兼容性问题解决方法

JS控制css float属性的用法

把网页变灰色兼容各种浏览器

完美解决IE兼容模式问题

精品推荐
分类导航