HTML中关于a标签的title属性怪事
2012-07-06 00:00
302 查看
HTML的a标签用于建立超链接，其title属性规定关于超链接元素的额外信息，即提供额外的提示信息。有代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
</body>
</html>
在IE测试下，第一个链接的title属性只在div“第二层”生效，而<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />则是<font>标签内全部无效。
继续进行测试，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
</body>
</html>
在前面加了几行<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />，竟然第五个链接（原本第一个链接）的全部元素都生效了，难道是因为受页面上端元素影响的？诡异啊。。。无解。
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />依然无效。
上述测试只在IE下有效，非IE浏览器无此现象。
解决方法：为兼容性考虑，a标签里最好不要再有子元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
</body>
</html>
在IE测试下，第一个链接的title属性只在div“第二层”生效，而<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />则是<font>标签内全部无效。
继续进行测试，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000">第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font><div style="color:#00F"> 第二层</div></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！<font color="#FF0000"> 第一层</font></a><br />
</body>
</html>
在前面加了几行<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" />看看啊！</a><br />，竟然第五个链接（原本第一个链接）的全部元素都生效了，难道是因为受页面上端元素影响的？诡异啊。。。无解。
<a href="#" title="看得见吗？"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /><font color="#FF0000"> 第一层</font></a><br />依然无效。
上述测试只在IE下有效，非IE浏览器无此现象。
解决方法：为兼容性考虑，a标签里最好不要再有子元素。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于 html中的title属性隐藏 办法
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
- 关于Html中的title属性内容换行，以及Bootstrap的tooltip的使用
- 关于Jquery.Data()和HTML标签的data-*属性
- HTML中input标签的alt属性和title属性的比较
- 关于html标签自定义属性的问题
- HTML <a>标签 title属性 鼠标悬停文字显示
- html img图片标签alt和title属性
- HTML中input标签的alt属性和title属性的比较
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- HTML基础 img标签title属性 鼠标移动到图片上时显示文字
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
- html标签title属性效果优化
- HTML语言中img标签的alt属性和title属性的作用与区别
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- 关于HTML中title标签中换行的解决方案
- 关于HTML标签自定义属性
- HTMLimg标签的alt属性和title属性使用介绍
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- 关于html中title属性