元素title属性在不同浏览器下的行为表现
2012-05-21 16:01
776 查看
元素的title属性常用于提示。但是不同浏览器下title的表现行为是不一样的。
各大浏览器基本上无大差异,鼠标移到元素上后即显示。
(下面操作行为假设鼠标一直在带title属性的目标元素内部进行)
FF,出现title时如果不移动鼠标title提示不会消失,移动鼠标后title消失。消失后再次移动鼠标提示不会再次出现
IE、Safari和Chrome,出现title提示大约5秒后自动消失。IE和Safari中,提示消失后再次移动鼠标提示不会再次出现,Chrome则会再次出现。
各大浏览器中,如果子元素title不为空,则子元素的title属性覆盖父元素的title。如果子元素title为空,除IE外其他浏览器自动显示父元素title,IE不会显示父元素的title。
总体来说,表现最好的为chrome,最差者为ie。
例如
要想IE出现提示,则要在“#2921”上加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属性
相关文章推荐
- 元素title属性在不同浏览器下的行为表现
- 浏览器行为研究-元素的title属性
- HTML select 元素 disabled 属性在主流浏览器中的表现
- js中,浏览器中不同元素位置属性解析
- 不同字体在浏览器表现不一致效果
- 网页元素的title属性
- line-height属性不同值类型的表现
- 浏览器对于CSS不同类中的同属性不同值优先级问题
- 开发WEB时,IE6/7中getAttribute获取href / src 属性(相对路径)值与其它浏览器不同
- css在不同浏览器中的唯一标识以height属性为例
- 对象属性property与元素属性attribute的浏览器支持
- IE6下 元素宽度或高度 与其他浏览器不同的原因
- 自定义右键属性覆盖浏览器默认右键行为实现代码
- http响应码303在不同浏览器上的表现 (原创)
- placeholder在不同浏览器下的表现及兼容方法
- 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响
- 各浏览器中option元素的表现差异
- IFRAME相关,各浏览器中 IFRAME 元素的 scrolling 属性与其子页面 HTML 与 BODY 元素 'overflow' 特性的制约关系有差异
- js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
- 各浏览器中 IFRAME 元素的 scrolling 属性与其子页面 HTML 与 BODY 元素 'overflow' 特性的制约关系有差异