打印

[教程] Firefox与IE下UL预设标记的异同

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1125
体力: 1661
威望: 214
当前: 江苏南京
离线: 3 天

专长 网页设计,编辑,项目管理

1^# 大中小发表于 2007-3-22 14:40

列表UL或是OL中都有一个预设标记，这个标记可能是实点圆点，也可能是数字。在实际的应用中，我们需要去掉这个预设标记，但我们不清楚这个预设标记是存在于什么位置。因为IE与FF似乎在处理UL的预设标记时都有着不同的方式：我们来写一个UL的HTML代码结构：

HTML结构

复制内容到剪贴板

代码:

<ul> 

 <li>建设部通报八起房地产交易违法、违规典型案例 </li> 

 <li>周小川表态引发美元震荡|人民币应成世界货币?</li> 

 <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> 

 <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> 

 <li>网络报告:美国是黑客大本营 中国是最大受害国</li> 

</ul>

提示：您可以先修改部分代码再运行

这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定一下CSS试着看一下IE与FF什么地方不一样：

CSS代码

复制内容到剪贴板

代码:

ul {background:#ddd; padding:0; }

提示：您可以先修改部分代码再运行

现在只把padding的值设为0，这时我们看一下IE中除了多个背景之外并没有什么变化，但是FF中的预设标记不见了！这里要注意的是IE中的预设标记是在背景外的。我们再来换个方式来设置：

CSS代码

复制内容到剪贴板

代码:

ul {background:#ddd; margin:0; }

提示：您可以先修改部分代码再运行

这里我们再看，情况相反，IE的预设标记不见了，而FF中的预设标记还在，这里要注意的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了，到底这是为什么呢？这个预设标记究竟是在什么地方的呢？下面我们通过一个实例来看一下UL的预设标记是在什么地方的！

HTML结构

复制内容到剪贴板

代码:

<ul> 

 <li>建设部通报八起房地产交易违法、违规典型案例 </li> 

 <li>周小川表态引发美元震荡|人民币应成世界货币?</li> 

 <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> 

 <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> 

 <li>网络报告:美国是黑客大本营 中国是最大受害国</li> 

</ul>

CSS代码

复制内容到剪贴板

代码:

ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; } 

li {background:#aaa;}

提示：您可以先修改部分代码再运行

这时我们看到，margin区域是最外围的白色部分，往里有点灰色的是border，再往里是更深一点的灰色，这个区域是padding，最深的区域是内容区。而预设标记正处在padding的区域，那么是不是说把padding区去掉这个预设标记就会消失呢？我们把CSS做一下修改：

CSS代码

复制内容到剪贴板

代码:

ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; } 

li {background:#aaa;}

提示：您可以先修改部分代码再运行

我们把padding设为0后发现预设标记依然还在，不过这时他处在了border的上面，那么我们可以根据上面推测出预设标记并不存在于margin,padding或是border中，margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。

那么这时我们大致上可能已经理解了，其实IE与FF对于UL的默认值的设定是不一样的，IE给了UL一个margin值，但是却没有给padding值，所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值，所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚，这个预设标记点不属于paading也不属于margin。他只属于内容部分，他一直是在内容的外边缘，当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》

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

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

原文：毅博客 http://andymao.com/andy/post/71.html

[ 本帖最后由小毅于 2007-3-22 20:07 编辑 ]

本帖最近评分记录

blank 威望 +3 精品文章 2007-3-22 15:11

毅博客 玉振之

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

raselion

狮子流星

中级会员

帖子: 1065
体力: 487
威望: 0
当前: 北京朝阳区

专长 前端制作

2^# 大中小发表于 2007-3-22 14:55

楼主的东西不错！

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

redstone

中级会员

帖子: 139
体力: 231
威望: 0
离线: 8 天

专长 UI,UE,项目管理

3^# 大中小发表于 2007-3-22 15:00

支持，这个问题也困扰过我....后来改用图片代替了...预设的那些当人们改变字体大小时会跟着一起变，点会变的爆大，非常之丑陋...

懒是一种境界！

TOP

掌握加薪筹码 IT薪资宝典给您答案！

wlvis

初级会员

帖子: 68
体力: 137
威望: 0
当前: 北京海淀区
离线: 50 天

专长 前端制作,JAVA,AS

4^# 大中小发表于 2007-3-22 17:02

楼主的研究比较深入，赞一个

ps.以前发现一个问题，现在提出来，不知道楼主有没有空看一下
就是把li的float属性设置为left之后，前面的预设标记在IE中就会消失，而在FF中则正常存在，这时候IE把预设标记藏到哪里去了呢？

---Vis---

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

笑天狂生

放眼未来

中级会员

帖子: 216
体力: 297
威望: 0
离线: 123 天

5^# 大中小发表于 2007-3-22 20:01

引用:

原帖由 wlvis 于 2007-3-22 17:02 发表
楼主的研究比较深入，赞一个

ps.以前发现一个问题，现在提出来，不知道楼主有没有空看一下
就是把li的float属性设置为left之后，前面的预设标记在IE中就会消失，而在FF中则正常存在，这时候IE把预设标记藏到 ...

疑问同上！

暗夜艳阳，晴空朗月。

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1125
体力: 1661
威望: 214
当前: 江苏南京
离线: 3 天

专长 网页设计,编辑,项目管理

6^# 大中小发表于 2007-3-22 20:04

引用:

原帖由 wlvis 于 2007-3-22 17:02 发表
楼主的研究比较深入，赞一个

ps.以前发现一个问题，现在提出来，不知道楼主有没有空看一下
就是把li的float属性设置为left之后，前面的预设标记在IE中就会消失，而在FF中则正常存在，这时候IE把预设标记藏到 ...

这个标记点去哪了？这是IE对这个预设标记层次的设定，在IE看来，这个预设标记与内容不在同一个等级上，当UL被设为float:left;时他被隐在了margin与border的下面，也许你不相信，但是这是事实。看下面的两个例子：

IE中消失的预设标记：

提示：您可以先修改部分代码再运行

被padding拉出来的预设标记

提示：您可以先修改部分代码再运行

由此我们可以推断IE是这样来解释的：在UL有了float:left;的属性后，预设标记的层次应该在margin与border之下，在padding之上。而在FF中，预设标记是与内容一起高于margin,border,padding的。

至于LI在设定float:left;之后为什么IE也看不到预设标记我想可能与所在的显示层次有关。但是我现在还没有一定的证据来证明这种现象的真实原因！

毅博客 玉振之

TOP

k236740

蓝星国度

中级会员

帖子: 235
体力: 326
威望: 28
当前: 台湾台中
离线: 3 天

专长 网页设计,UI,前端制作

7^# 大中小发表于 2007-3-23 01:56

這個有意思!
我得徹底研究才行

在網頁設計的領域裡~沒有做不到~只有想不到

TOP

weihua22

缘客

中级会员

帖子: 193
体力: 404
威望: 0
当前: 黑龙江哈尔滨
离线: 16 天

8^# 大中小发表于 2007-3-23 14:30

顶个先～～～～～～～～～

TOP

z3333426

探索

银牌会员

帖子: 5036
体力: 1496
威望: 0
当前: 上海闵行

专长 前端制作,.NET,UE

9^# 大中小发表于 2007-3-23 14:54

* {list-style:none;}
从来就不打算用那个看起来不一样的小点点

惟草木之零落兮，恐美人之迟暮。

TOP

kobexiang

初级会员

帖子: 100
体力: 180
威望: 0
当前: 广东广州
离线: 3 天

10^# 大中小发表于 2007-3-23 14:57

不错不错,经典教学,值得学习~~~

TOP

old9

银牌会员

帖子: 600
体力: 995
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

11^# 大中小发表于 2007-3-23 15:48

关于 float 之后点消失的问题，说说我的猜测
先说 UL 被 float 时候的情况，这个我想应该是 layout 问题。因为 layout 元素有一个裁切内部内容的特性，li 前面那个点出现的机制虽然不是很清楚，但应该是受这个裁切规则影响的。所以当 li 有一个足够大的 margin 或者 ul 有一个足够大的 padding 时这个点会重新出现。我这么推论的原因是因为不光 float 时有这个现象，使用其他的 layout 触发器也会出现类似情况，看一个简单的例子，其中第二个 ul 通过 zoom 触发了 layout，可以看到 li 前面的点也消失了：

提示：您可以先修改部分代码再运行

再说 li 被 float 时的情况，这个实在是看不出什么原因，只能从那个点产生的机制上猜了。说些诡异现象大家一起猜吧：
1。float 之后点消失
2。position:absolute/fixed 之后点消失
3。ul 有不为 0 的 padding 或者 border，且第一个 li 具有 layout 时，第一个 li 的点消失。

本帖最近评分记录

blank 威望 +1 老九的分析让疑问更明确，个人也同意这 ... 2007-3-23 16:09

http://old9.blogsome.com 已被 GFW 封锁

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1125
体力: 1661
威望: 214
当前: 江苏南京
离线: 3 天

专长 网页设计,编辑,项目管理

12^# 大中小发表于 2007-3-23 15:56

老九说的有道理，在FF中这个点并没有消失，而是出现在前一个内容区域，形成了一个交差。相信IE是为了避免这种现象的出现而把这些内容进行了裁切。为的就是避免预设标记的溢出！

毅博客 玉振之

TOP

blank

怿飞

版主

帖子: 2239
体力: 3341
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

13^# 大中小发表于 2007-3-23 16:12

我也比较倾向老九的分析和猜测！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

connorgg

我爱义乌

初级会员

帖子: 68
体力: 131
威望: 0
当前: 浙江金华
离线: 14 天

14^# 大中小发表于 2007-3-23 17:08

分析深入，慢慢再学
本人还有个疑问，<li>标签是最好在<ul>或<ol>中专用还是在任何div中都可随便使用，谢谢

TOP

highps

初级会员

帖子: 112
体力: 118
威望: 0
离线: 86 天

15^# 大中小发表于 2007-3-23 18:01

自己用图片多好啊，我平时除非是自动排1、2、3、4用，其他时候都用自己的图片或不用

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1125
体力: 1661
威望: 214
当前: 江苏南京
离线: 3 天

专长 网页设计,编辑,项目管理

16^# 大中小发表于 2007-3-23 21:03

引用:

原帖由 connorgg 于 2007-3-23 17:08 发表
分析深入，慢慢再学
本人还有个疑问，<li>标签是最好在<ul>或<ol>中专用还是在任何div中都可随便使用，谢谢

LI专属于UL或OL

毅博客 玉振之

TOP

MagicYY

高级会员

帖子: 401
体力: 633
威望: 0
离线: 8 天

17^# 大中小发表于 2007-3-23 22:15

语法：
list-style-position : outside | inside
取值：
outside :　默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside :　列表项目标记放置在文本以内，且环绕文本根据标记对齐

TOP

yougucaofan

银牌会员

帖子: 1168
体力: 2136
威望: 0
离线: 101 天

18^# 大中小发表于 2007-3-24 11:29

9哥一出手，果真是精品，羡慕。技术真强，
裁切内部内容的特性，
这个BUG太让人生气

忍受。一定要学会忍受。

TOP

wangning886111

草根

银牌会员

帖子: 3028
体力: 1114
威望: 1
当前: 北京崇文区
离线: 1 天

专长 网页设计,前端制作

19^# 大中小发表于 2007-3-24 14:59

顶个先``````````````````

TOP

htbait

初级会员

帖子: 28
体力: 60
威望: 0
离线: 24 天

20^# 大中小发表于 2007-3-25 05:56

高手一出手！就知有没有！

开眼了！

看来要加倍努力才能赶上时代！

TOP

mallee

老李飞砖

银牌会员

帖子: 645
体力: 1173
威望: 2
当前: 河北秦皇岛
离线: 19 天

21^# 大中小发表于 2007-3-27 11:21

{list-type:none}
不过ol用起来挺有意思的！

iw3c.com

TOP

raphealcwj

当空接龙

初级会员

帖子: 70
体力: 107
威望: 0
当前: 北京朝阳区
离线: 5 天

专长 Flash,前端制作,策划

22^# 大中小发表于 2007-4-9 13:43

我一般是设置list-style-position : outside | inside来解决一下

TOP

hansir

時光

银牌会员

帖子: 2138
体力: 1553
威望: 3
当前: 北京西城区

专长 前端制作,JS,PHP

23^# 大中小发表于 2007-5-12 11:57

让Li内容往右一点就看到点了

提示：您可以先修改部分代码再运行

[ 本帖最后由 hansir 于 2007-5-12 12:07 编辑 ]

博客：http://www.hansir.cn

TOP

alou

小娄

高级会员

帖子: 355
体力: 744
威望: 0
当前: 上海徐汇
离线: 1 天

专长 前端制作,JS

24^# 大中小发表于 2007-5-12 13:34

好文章。。

小娄

TOP

WPS2008

蓝色小强

高级会员

帖子: 391
体力: 524
威望: 0
当前: 北京朝阳区
离线: 4 天

专长 网页设计,前端制作,UE

25^# 大中小发表于 2007-5-14 17:14

高手如云啊
路过！

我测试了一下六楼的程序。在IE6\FF都没有问题，但是在IE7还是存在问题的。

期待答案。
哈哈我比猪还懒。靠大家了

TOP

WPS2008

蓝色小强

高级会员

帖子: 391
体力: 524
威望: 0
当前: 北京朝阳区
离线: 4 天

专长 网页设计,前端制作,UE

26^# 大中小发表于 2007-5-15 09:47

其实不是懒。只不过真的不理解改怎么去解决。
继续期待ING

TOP

fkueaps

银牌会员

帖子: 926
体力: 1885
威望: 4
当前: 北京海淀区

专长 前端制作

27^# 大中小发表于 2007-5-15 11:49

真是巧了，前几天有群众询问IF与FF下<UL>的预设属性呢，俺用放大镜瞄准（差点斗鸡眼了）滴结果亦在这里发一下吧:

复制内容到剪贴板

代码:

IE : margin-top:19px

IE : margin-left:40px

-----------------------------

FF : margin-top:16px

FF : padding-left:40px

俺滴blog

TOP