当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 由显示/隐藏引出的CSS Bug

HTML/XHTML教程
HTML代码学习:DOCTYPE的缩写
DTD文档类型声明doctype
邮件HTML的一些经验总结
HTML5标准的前途
实现lightBox时的样式与行为分离减少JS
网页文字实现竖排的几种方法
HTML的dl、dt、dd标记制作表格对决Table制作表格
Web页面中使用自定义选择框Select
XHTML2死掉,XHTML1.x语法在HTML5中可以使用
HTML5与未来的网页设计(英文教程)
IETester兼容win7
HTML5学习资源整理
safari:webkit
iframe自适应大小
微软IE团队开始注重HTML 5规范
网页设计中的标点符号应用规范
优秀产品设计中的9点良好的用户体验设计
HTML 5解析规则
HTML减肥:精简HTML标记制作网页
HTML网页制作教程:谨慎使用iframe标记

HTML/XHTML教程 中的 由显示/隐藏引出的CSS Bug


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 62 ::
收藏到网摘: n/a

  这一段CSS代码相当简单,目的就是想用CSS来控制某段文字的显示与隐藏。起初我采用了下面的代码,令人不可思议的是,它们在我的6.0上居然没有任何反应,大家不信可以亲自试验一下。


<style type="text/css">
a {font-size:12px;
text-decoration:none;
height:50;}
a:hover {text-decoration:none;}
a span {font-size:12px;
display:none;}
a:hover span {display:block;}
</style>
<a href="#">link<span>我是隐藏内容</span></a>

  


  我仔仔细细地检查了一遍代码,实在找不到什么毛病来。没有办法,我只能像平时查错纠错一样,试着改改CSS里的代码。当我改变了hover伪类链接中的代码时(代码如下所示),突然发现代码可以运行了。
  为了确认CSS是否真存在该bug,我又特地改用大小、颜色、位置等样式来试验,在不改变hover伪类链接的前提下,都无法得到正常情况下应得到的效果。从而可以得知:在包含选择符有伪类链接时,存在着CSS样式无效的bug,希望CSS下一版中能修正这个错误。
a:hover {text-decoration:none;border:none;}
  这样我们可以知道,在hover伪类链接中必须包含某些特殊的CSS属性声明才能消除这个bug。 我用了CSS里所有的属性声明来尝试解决这个bug,发现只有一下几项属性声明能解决这个问题。
border
display
postion
overfilow
background
  而我之所以采用“border:none”这种方法,是因为它还能从Netscape 4中消除一些不同的CSS错误。
  注:本文所提及的bug在IE5.5、IE6.0中均存在。