论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}在IE中为abbr标签加样式

文章类别:div+css布局 | 发表日期:2008-9-26 11:53:30

  简介

  <abbr>是用来为web页面上的简称(译者注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母的缩写用<acronym>标签)添加适当标注的XHTML标签,Windows的IE浏览器暂不支持<abbr>标签。 在IE里,你可以应用CSS给<acronym>但是不能应用给<abbr>标签,IE会为<acronym>标签的title属性显示提示,但是会忽略<abbr>标签。

  这个IE的bug(或者特色)使得一些网站人员认为<abbr>标签一点用都没有,而显然这么认为是不对的。在Mozilla和Opera里还是很正确的处理了这个标签,并且它对于web内容的可读性和语义化来说非常重要。这也是我为什么一直在寻找解决方法,最终我找到了。

  解决方法

  本方法基于一个简单的事实:即使IE会忽略<abbr>标签,但是其他嵌套在<abbr>标签里的标签还是正常的。所以我在嵌了一个<span>标签在<abbr>里,设置<span>的title和class属性,然后<abbr>开始变得和<acronym>标签一样了。

  代码例子

  看一下下面的代码,是一个简单的缩写词的例子:

  <abbr title=\"Cascading Style Sheets\">CSS</abbr>

  现在,对比一下修改后的代码:

  <abbr title=\"Cascading Style Sheets\"><span class=\"abbr\" title=\"Cascading Style Sheets\">CSS</span></abbr>

  自动操作

  手动的给每一个<abbr>标签嵌入<span>显然不可能——既无聊又对Mozilla和Opera没必要。幸运的是,现在有一个自动的、基于客户端脚本的解决方法。

  你可能注重到了,这个页面(译者注:原作者的页面)上的简写词语即使在IE里都会有提示,并且加了CSS样式(虚下划线和一个问号状的鼠标光标)。然而你假如看一下源代码,你将找不到在上文提到的<span>标签。这得益于本页加载的一个简单的JavaScript:

  function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
  oldBodyText = document.body.innerHTML;
  reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
  newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\\"abbr\\" $1>$2</SPAN></ABBR>');
  document.body.innerHTML = newBodyText;
  }
  }
  window.onload = function(){
  styleAbbr()
  };   isIE = (document.all) ? true:false;

  这段脚本会检查客户端浏览器,假如是IE,那么则替换所有的<abbr>标签为修改过的版本(嵌入了<span>)。注重的是我们必须使用正则表达式和innerHTML属性来取代标准的DOM方法,因为IE不能通过DOM来获取<abbr>属性。

  样式化

  最后看一下这个页面上使用的CSS。相当简单:

  abbr, acronym, span.abbr {
  cursor: help;
  border-bottom: 1px dashed #000;
  }

  Mozilla和Opera使用abbr和acronym属性选择器,IE则使用acronym和span.abbr。无论如何,<abbr>和<acronym>都被样式化了——一个问号状的鼠标光标(当鼠标指上后)和虚下划线。

上一篇:{WEB标准}如何以及何时使用sIFR 人气:3811
下一篇:{WEB标准}w3c技术架构介绍 人气:2748
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058