今天小编跟大家讲解下有关a标签的bug hover状态不触发 可点区域不可点击 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关a标签的bug hover状态不触发 可点区域不可点击 的相关资料，希望小伙伴们看了有所帮助。
度假项目告一段落了 但在项目中遇到的问题却不少 这里挑几个重要的bug或者说失误 来进行说明。
先来看一下有哪几个bug或者失误要分享一下。
a标签不加href属性a标签:hover状态不触发buga标签可点区域不可点击bug
a标签不加href属性个人觉得都不能称之为bug 但还是拿出来说道说道 因为确实有人这么干 查找问题的时候也花费了点时间。请看demo1
图一
图二
Firefox7、chrome14、safari5、opera10.6、ie8、ie9显示效果如图1 但在鼠标形状上 opera为正常状态(箭头) 另外五个为选文字状态(I形状)。ie6/7里面却根本不鸟你 除了title显示出来后 没有其它任何变化 如图2。
也许有人会说 这么明显的错误 一看就看出来了 但是如果我在a:hover{cursor:pointer}一下（也许你没有这么做过） 除了ie6/7 其它的都跟正常的链接一下 只有ie6/7 鼠标放上去仍然不可用。demo1-1
解决办法：给a添加href=”"
a标签:hover状态不触发bug这个bug对我来说 也是第一次遇到 这是在做一个点评相关的模块时遇到的。这个bug只会出现在ie6中（如果你不考虑ie6 请跳过这个bug）。请看demo2
图三
图四
在标准浏览器中 鼠标放到星级上面时 里面的文字会出现(如图3) 但是ie6不会产生任何变化（如图4） 后来经过同事的指点 加上查找文章 得出一个小结论 当a与a:hover样式不发生变化的时候 ie6会认为没有触发:hover（在demo2中 鼠标放上去后 没有任何的变化） 因此也就不能实现demo2中要实现的效果。
图5
解决办法：给a:hover添加border:0 在视觉上没有发生任何变化 但是ie6中 当鼠标放上去后 触发了:hover。里面的span也显示出来了demo2-2(如图5) 但新的问题产生了 原来写在span里面的背景没有因为鼠标的离开而隐藏起来（如图6） 刚开始以为跟a一样 要有样式的变化 但试了几个属性后 我放弃了 直接把背景写在了a:hover span里面 问题解决(demo2-3)。
虽然问题解决了 但是为什么却不是非常的了解 也请了解的朋友给我留言。在这里先谢过了。另附一个小demo3
a标签可点区域不可点击bug这个可能不能称之为a的bug 但是还是放在这里来说 反正跟他也有点相关。先看demo4
图7
在图7中 左侧的携程旅行网在非ie6/7的浏览器中 带背景的区域都是可以点击的 但在ie6/7中 只有文字部分可以点击 空白区域的地方却不可以点击。
bug产生原因：在ie6/7中 绝对定位的元素 如果里面的子元素向右浮动 会使定位的这个父元素宽度变成100% 从而覆盖到a的上面 造成不可点击（添加个背景颜色 可以更直观）。
解决办法：即然宽度发生了变化 那就给定位的元素设置个宽度来解决问题。具体请看demo5。
这个bug实在不好来说明 还是直接看代码演示吧 有不明白的请留言。
圣诞节马上就要到了 祝大家圣诞快乐！
来源：爱蒂网
