这个“竖线”应该是什么？
发表时间: March 17, 2009 分类: WebBuild 4条评论
先看几个图吧：
提问：这些“竖线”分隔符是什么——在HTML里怎么表现？
- 仅仅在HTML里面插入一个竖线：|；
- 将竖线放在一个<span>标签里面；
- 作为背景图片插入（作为该导航连接的标签背景或者添加一个如<span>标签设置其背景）；
- 作为列表（如果导航连接是放在一个列表标签里）的list-style样式属性；
- 作为border样式表现；
- others......
绝大部分网站将这个竖线表现为1或者2的形式，有些网站将这个用在了背景图（如淘宝），yahoo是用border样式表现的。到底用那种表现方式更好呢？
首先我们得弄清楚一件事：（从语义上来说）这个竖线到底是什么？
我个人的理解这是一个分割符（废话！），应该用border样式比较科学。打个比方：就像两个相邻的房间，中间分割的是墙。那么作为盒模型，border应该是最类似这个“墙”的。
只是，如果这个分割符不是一个“竖线”呢？像淘宝栏目导航和腾讯首页顶部的导航。我觉得这个分割（视觉表现形式）从HTML语义上来说没有明显的意义，在现阶段作为list-style表现可能比较好（不要说你的导航不是包含在列表里的）。
之所以说“现阶段”，是因为幸运的是CSS3已经支持将图片作为border（感谢腾讯文王同学提供参考文章地址），当然不幸的是还只有Safari和Firefox 3.1 (Alpha)支持这个属性，等到其他浏览器的支持估计不知道得等到什么时候。
上述观点欢迎大家发表不同意见。
