在IE中为abbr标签加样式(转)

在IE中为abbr标签加样式(转)

    简介

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

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

    解决方法

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

    代码例子

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

    CSS

    现在，对比一下修改后的代码：

    CSS

    自动操作

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

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

    function styleAbbr（） {

    var oldBodyText， newBodyText， reg

    if （isIE） {

    oldBodyText = document.body.innerHTML；

    reg = /]*）>（[^/g；

    newBodyText = oldBodyText.replace（reg， '$2'）；

    document.body.innerHTML = newBodyText；

    }

    }

    window.onload = function（）{

    styleAbbr（）

    }；

    isIE = （document.all） ？ true：false；

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

    样式化

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

    abbr， acronym， span.abbr {

    cursor： help；

    border-bottom： 1px dashed #000；

    }

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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14102/viewspace-114925/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14102/viewspace-114925/