文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | firefox | WPS | 杀毒软件 | Picasa
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形图像 办公软件 媒体动画 精文荟萃 常用软件 网页编程 技术开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院专栏firefox兼容:Firefox与IE下UL预设标记的异同
精品推荐
特别推荐
·下载:Firefox 4.0 Alpha 1 Pre版
·推荐一些实用的Firefox扩展
·帮你解决Firefox无节制内存占用的问题
·不可或缺 20个必备的Firefox插件
·提高做火狐firefox推介效果的技巧代码
·Firefox v2.0.0.9 简体中文版下载
·Javascript在IE和FireFox中的不同表现
·Firefox火狐浏览器常用快捷键大全
·Firefox明年目标:30%市场份额
·101件Firefox能而IE不能做的事
·常用技巧:解决Firefox启动慢的四种方法
·让IE也拥有Firefox的七大最强武器
·Firefox 浏览器实用应用技巧六则
·提高浏览体验的五十个FireFox扩展
·巧用插件 让Firefox也用上Web迅雷
·快速掌握使用Firefox技巧问答
·没有不可能 让Firefox也用上Web迅雷
·innerHTML在Firefox和Opera下的执行特例
·FireFox 如何用Javascript 修改状态栏
·实现IE收藏夹和Firefox书签互换
热点TOP10
·实现IE收藏夹和Firefox书签互换
·纯CSS的下拉菜单 支持IE6 IE7 Firefox
·下载:Firefox 4.0 Alpha 1 Pre版
·innerHTML在Firefox和Opera下的执行特例
·分享个极好的无刷新二级联动下拉列表,同样适用与firefox
·优化firefox提高上网浏览速度
·支持IE6 IE7 Firefox的纯CSS的下拉菜单
·firefox FTP合二为一 工作省心又方便
·火狐firefox FTP合二为一 工作省心又方便
·Firefox 必装的几款 NB 插件
·Firefox 使用常见问题和解决方法
·不可或缺 20个必备的Firefox插件
·换种思路 让Firefox用上迅雷下载
·加快mozilla-firefox的启动速度
·FireFox对XML的处理兼容IE的节点处理方法
·IE和Firefox在JavaScript方面的兼容性
·没有不可能 让Firefox也用上Web迅雷
·Firefox的32个插件介绍
·解决Firefox上网看不了Flash网页的问题
·让FireFox浏览网页速度大大提高

兼容:Firefox与IE下UL预设标记的异同

日期:2007年7月6日 作者: 查看:[大字体 中字体 小字体]


列表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;

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

此帖在经典论坛发布后,有朋友提出了这样的问题:“把li的float属性设置为left之后,前面的预设标记在IE中就会消失,而在FF中则正常存在,这时候IE把预设标记藏到哪里去了呢?”下面就这个问题做一下解释:

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

IE中消失的预设标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMLns="http://www.w3.org/1999/xhtml">

[1] [2] 下一页 




上一篇:学习网页标准之超级连接属性rel与target详解

下一篇:技巧文章:结构中id与class的使用原则与技巧

兼容:Firefox与IE下UL预设标记的异同 相关文章:
·兼容:Firefox与IE下UL预设标记的异同
兼容:Firefox与IE下UL预设标记的异同 相关软件:

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:vipcn