a标签的bug hover状态不触发 可点区域不可点击

所属分类: 网页制作 / CSS 阅读数: 1884
收藏 0 赞 0 分享

度假项目告一段落了,但在项目中遇到的问题却不少,这里挑几个重要的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实在不好来说明,还是直接看代码演示吧,有不明白的请留言。

圣诞节马上就要到了,祝大家圣诞快乐!

更多精彩内容其他人还在看

CSS样式分离之再分离达到精简与重用

无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有
收藏 0 赞 0 分享

CSS属性behavior的语法使用说明

在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
收藏 0 赞 0 分享

网页制作中的水平居中和垂直居中解决方法集合

 在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。
收藏 0 赞 0 分享

最常见IE的Bug及其fix修复方法

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。
收藏 0 赞 0 分享

CSS常用浏览器兼容调整小结

用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……
收藏 0 赞 0 分享

css firefox火狐浏览器下的兼容性问题

css firefox火狐浏览器下的兼容性问题
收藏 0 赞 0 分享

DIV+CSS 浏览器兼容性小结

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
收藏 0 赞 0 分享

div+css 布局常识 8问

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天jb51.net收集了常见的8条面试题目,希望对您有所帮助。
收藏 0 赞 0 分享

CSS用四种方式实现布局

CSS用四种方式实现布局
收藏 0 赞 0 分享

css 解决表格边框不显示的问题

在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
收藏 0 赞 0 分享
查看更多