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相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。