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实在不好来说明，还是直接看代码演示吧，有不明白的请留言。

圣诞节马上就要到了，祝大家圣诞快乐！

最新评论