css ul li 的应用及访问器适配难题

日期:2020-08-26 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

假如大家给 ul 再加1个情况或架构,它就会露出原型,也便是在 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 能够基础无论啦。可是1定要设定 list-style-type:none; 否则你会发如今 FF 中仍然会出現新项目标记的。

这里详细介绍1个特性 display:list-item; 将块目标特定为目录新项目,并能够加上可选新项目标示,也便是 ul/li 的简化版,在 div 和 P 中能够设定为目录显示信息,而且能够为目录新项目加上标记。

一般大家不容易用默认设置的新项目标记,由于访问器的不一样,它的部位和尺寸在各个访问器中的3D渲染也是有差别的,并且它不可以精准精准定位,因此1般大家全是根据对 li 设定照片情况 backgroud-image: url() no repeat; 来仿真模拟新项目标记的。

下面是新项目标记的系统软件款式:list-style-type