在IE中为abbr标签加样式
星期三, 06月 4th, 2008
作者:JunChen 2005-5-24 9:56:57
原文:http://www.sovavsiti.cz/css/abbr.html
翻译:JunChen
版权:译者JunChen所有,转载请联系译者.
简介
<abbr>是用来为web页面上de简称(译者注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母de缩写用<acronym>标签)添加适当标注deXHTML标签,WindowsdeIE浏览器暂不支持<abbr>标签. 在IE里,您可以应用CSS给<acronym>但是不能应用给<abbr>标签,IE会为<acronym>标签detitle属性显示提示,但是会忽略<abbr>标签.
这个IEdebug(或者特色)使得一些网站人员认为<abbr>标签一点用都没有,而显然这么认为是不对de.在Mozilla和Opera里还是很正确de处理了这个标签,并且它对于web内容de可读性和语义化来说非常重要.这也是我为什么一直在寻找解决方法,最终我找到了.
解决方法
本方法基于一个简单de事实:即使IE会忽略<abbr>标签,但是其他嵌套在<abbr>标签里de标签还是正常de.所以我在嵌了一个<span>标签在<abbr>里,设置<span>detitle和class属性,然后<abbr>开始变得和<acronym>标签一样了.
相关代码例子
看一下下面de相关代码,是一个简单de缩写词de例子:
<abbr title=”Cascading Style Sheets”>CSS</abbr>
现在,对比一下修改后de相关代码:
<abbr title=”Cascading Style Sheets”><span class=”abbr” title=”Cascading Style Sheets”>CSS</span></abbr>
自动操作
手动de给每一个<abbr>标签嵌入<span>显然不可能——既无聊又对Mozilla和Opera没必要.幸运de是,现在有一个自动de、基于客户端脚本de解决方法.
您可能注意到了,这个页面(译者注:原作者de页面)上de简写词语即使在IE里都会有提示,并且加了CSS样式(虚下划线和一个问号状de鼠标光标).然而您如果看一下源相关代码,您将找不到在上文提到de<span>标签.这得益于本页加载de一个简单deJavaScript:
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,那么则替换所有de<abbr>标签为修改过de版本(嵌入了<span>).注意de是我必须使用正则表达式和innerHTML属性来取代标准deDOM方法,因为IE不能通过DOM来获取<abbr>属性.
样式化
最后看一下这个页面上使用deCSS.相当简单:
abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla和Opera使用abbr和acronym属性选择器,IE则使用acronym和span.abbr.无论如何,<abbr>和<acronym>都被样式化了——一个问号状de鼠标光标(当鼠标指上后)和虚下划线.
其他
1.感谢Michael Kusyn提供了JavaScript解决方法.
2.更多关于<abbr>,<acronym>标签和两者de区别,参考Craig SailadeHTML is not an acronym… (Evolt.org)
欢迎交流意见评论,可以发邮件至marek@sovavsiti.cz.
