Fdream's Blog
专注于WEB前端开发
Powered by Google

UL/OL的预设标记在IE和Firefox等浏览器下的差别

15 晴天 2008-10
Fdream 发表于 Ajax Web, 已被阅读 631 次, 评论 0 条
关键词:html CSS
[ 阅读字体大小: ]

先说句题外话,昨天Silverlight 2.0发布了RTW(很多人都以为是RTM,这里的RTW是针对互联网版本的一个说法:Release to Web)版本。今天一大早的打开Google Reader,发现Flash Player 10和Flash CS4的文档已经发布了,中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了,至少在新版本的发布上已经有这个意思了。

===========严肃的分割线============

好了,言归正传,回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记,就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。

很多时候,很多人不喜欢这个玩意儿,于是就想把它藏起来,这个也很好办,这么一行就搞定了:

参考代码: [复制代码] [保存代码]

ul{
    list-style-type:none; 
}

但是还是有一个问题,前面有好多空格好难看……再加两行:

参考代码: [复制代码] [保存代码]

ul{
    margin:0;
    padding:0;
    list-style-type:none; 
}

新的问题来了,如果我要他们出现,又要调整他们的padding或者margin,这个时候就发现在IE和Firefox下,这几个原点的位置相差太大了!这里有一篇文章讲得很详细,他们的位置到底与什么有关:Firefox与IE下UL预设标记的异同。文章的作者很认真,并做了许多测试,得出了一个结论:

引用内容:

这个预设标记点不属于paading也不属于margin。他只属于内容部分,他一直是在内容的外边缘,当然我们还可以通过CSS来设置其在内容的内边缘。

想要让这个预设标记消失光用margin:0;与padding:0;因为如果出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是:margin:0; padding:0; list-style:none;

虽然预设标记很不错,但是却没办法精确控制,所以在实际应用中并不推荐使用,还是用背景图来代替!

作者说这个预设标记属于内容部分,而这个标记在内容部分的表现在不同浏览器下仍然有很大差别。首先是在padding-left上的差别:在IE下,padding-left是算的是从外边缘到预设标记之间的距离,此时预设标记和内容会整体往右偏移;而在Firefox下,padding-left算的是预设标记到真正的内容之间的距离,此时预设标记不会移动,而内容会往右边偏移。因此会有下图的情况出现:

还有text-indent也是同样的,大家可以做更多的测试。

Related articles 您可能对这些文章也感兴趣:

 
Related comments 与该文相关的评论:(我也想说几句)
Add a comment 我来说两句: 
禁止表情
禁止UBB
禁止图片
识别链接
识别关键字
表  情
arrow
用户名:   密码:  (匿名可不写) 同时注册?
验证码:   看不清?换个图片  看不清楚?换个图片

 
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.8593695 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号