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>html
<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>ui
在前面加了几行<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标签里最好不要再有子元素。spa
- 1. 奇怪的标签a的属性（target）
- 2. Html Title 标签
- 3. HTML——<a>标签的target属性
- 4. HTML中强大的input标签属性 HTML中强大的input标签属性
- 5. HTML标签属性
- 6. 关于html中的标签
- 7. 关于a标签中href属性的多种用法
- 8. 关于html页面img标签中src属性的理解
- 9. a标签的download属性
- 10. HTML 标签的 enctype 属性
- 更多相关文章...
- • MyBatis if标签 - MyBatis教程
- • MyBatis foreach标签 - MyBatis教程
- • ☆基于Java Instrument的Agent实现
- • NewSQL-TiDB相关
-
每一个你不满意的现在，都有一个你没有努力的曾经。