您现在的位置:主页 > 网站制作 > HTML/XHTML >

网页设计列表标记ul,ol,dl在不同浏览器的兼容问题

来源:新2备用网址hg622.com|首页吧 责任编辑:Jzq8 发表时间:2012-06-15 点击:次

一、可以看做废话的前言
HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。

对初学者或是有一定CSS方面经验的同行们应该会有帮助的。

二、HTML中可用的列表元素
1、无序列表:ul
无序列表是最常使用的列表,下图显示了无序列表在不同浏览器下的显示:
不同浏览器下无序列表的表现

demo页面

正如上面显示的,无序列表在不同浏览器下的默认设置是由些许差异的。当然,在如今实际的网站项目上是很少看到没有任何修饰的无序列表了。其中原因之一就是CSS的重置(css reset),已经将无序列表默认的列表项目符号,margin或padding都去掉了。

无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image。这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

list-style-type属性可以设置为一些不同的值,下面图表展示的就是部分值的页面效果:
list-style-type不同值的表现

依赖于用户的浏览器及操作系统,某些list-style-item值可能不能正确显示,通常默认为十进制数值,用无需列表实现递增数值是不推荐的,因为这样“无序列表”其本身的语义已经不复存在了。

list-style-position针对于列表标记的位置,可以被设置为outside(默认)或是inside。如果list-style-image被设置的话,其也会影响图片的位置。

list-style-image属性可以给无序列表一个自定义的独一无二的表现,不幸的是,在IE下使用此方法添加项目编号是bug多多,故很少被使用。一个更好的解决方法是添加background image到列表的li元素上,并相应的调整background image的位置,并设置为no-repeat。在maxdesign.com上,已经通过分步讲解演示了这个方法,而且在所有的浏览器下都工作良好。

2、有序列表:ol
有序列表在当列表项目的每个列表项目前面需要一个递增值的时候使用(例如1,2,3等)。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下,有序列表要么前面是个递增数值,要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样,有序列表本身的语义已经不正确了。
有序列表使用的实例截图

3、定义列表:dl
定义列表用来标记已经定义的列表项,它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配,下面的代码在严格的XHTML下是完全合法的:

无线音乐咪咕汇
哥本哈根会议
《十月围城》

这样,您可以在单个dd下面使用多个dt,也可以在单个dt下面使用多个dd。

定义列表的视觉显示,默认情况下,各个浏览器的显示几乎是一致的,如下图所示:
dl定义列表在Firefox下的显示

demo页面

上图对应的HTML代码如下:

 
标题
这里是定义的内容
热门电影
十月围城
刺陵
三枪拍案惊奇
阿凡达
热点关注
股市
房价
元旦
曹操墓

4、过时淘汰的列表:menu&dir

元素,从技术上说,也可以称为“HTML列表”,但它们在XHTML中已过时淘汰了,所以这里不详细讨论它们。

5、HTML5中的列表

在HTML中,无序列表基本上保持不变,虽然似乎现在它被简称为“列表”,新的

元素将被用来包裹列表当作导航使用。

ol元素有轻微的改变,它获得了两个新属性:reversed,这是一个布尔值,用来表示列表是上升还是下降;start,这是个整数,用以宣告有序列表的起点。

此外,

元素将被增加,它们会有子元素,其中包括
元素。

更多关于HTML5方面的知识可以参见淘宝空雁的 揭秘HTML5和CSS3【珍珠奶茶帮】的这篇文章。另外您还可以点击这里查看在线的ppt。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
匿名?

推荐图文

  • 网页设计列表标记ul,ol,dl在不同浏览器的兼容问题
  • 论述使用HTML5的利与弊
  • 15 个非常值得收藏的 HTML5 资源
  • 13个应用HTML5 和 CSS3 实现的Web效果
  • 8个你从未见过的HTML5 Canvas和JavaScript的动画
  • HTML常用格式 新2备用网址hg622.com|首页吧HTML第三节
  • 新2备用网址hg622.com|首页吧:HTML 5入门级技巧
  • HTML基本概念 新2备用网址hg622.com|首页吧HTML第一节
  • HTML基础Tag 新2备用网址hg622.com|首页吧HTML第二节
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright ? 2013 JZQ8.COM. 新2备用网址hg622.com|首页吧|新2备用网址hg622.com|首页去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款