元素title属性在不同浏览器下的行为表现

最新推荐文章于 2022-04-15 00:00:00 发布

p2227

最新推荐文章于 2022-04-15 00:00:00 发布

阅读量8k

点赞数

文章标签：浏览器 safari chrome ie class html

元素的title属性常用于提示。但是不同浏览器下title的表现行为是不一样的。

行为1-显示：

各大浏览器基本上无大差异，鼠标移到元素上后即显示。

行为2-消失：

(下面操作行为假设鼠标一直在带title属性的目标元素内部进行)

FF，出现title时如果不移动鼠标title提示不会消失，移动鼠标后title消失。消失后再次移动鼠标提示不会再次出现

IE、Safari和Chrome，出现title提示大约5秒后自动消失。IE和Safari中，提示消失后再次移动鼠标提示不会再次出现，Chrome则会再次出现。

行为3-子元素title与父元素title

各大浏览器中，如果子元素title不为空，则子元素的title属性覆盖父元素的title。如果子元素title为空，除IE外其他浏览器自动显示父元素title，IE不会显示父元素的title。

总体来说，表现最好的为chrome，最差者为ie。

例如

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	</head>
	<body>

<UL>
<LI>
<DIV>
<A title=IE这里不出现提示 href="#" >
<SPAN class="icon aaaa"> </SPAN><SPAN id=2921 class=nav>没有提示出现</SPAN></A>
</DIV>
</LI>
<LI>
<DIV>
<A title=我想要出现的提示 href="#">
有提示出现</A>
</DIV>
</LI>
</UL>
		</body>
	</html>

要想IE出现提示，则要在“#2921”上加title属性