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

所属分类: 网页制作 / CSS 阅读数: 1887
收藏 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盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多