Home思洋影视事业部网站建设知识库
0 Comments

IE中中CSS伪类:hover的使用及其BUG(3)

发布于：2013-08-20  |   作者：广州网站建设  |   已聚集：人围观

那到底是什么问题呢？

不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。

那又该如何解决这个问题呢？

◆这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。

对CSS代码我们增加：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		lia:hover{}  
    2. 
	
  2. 
		 
    3. 




	对其属性我们仅设定width:100px;发现在IE6中依旧没有变化，我们尝试着更改width的value，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对lia:hover的属性仅设定color来测试（初始值为#fff），更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！



	我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。



	我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hoverBUG的特定属性。



	说明： 1、对于dispaly不可以用本例来测试，可另外写个更简单的例子（去除ul/li，a和span中的position）。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG，而且在某些例子中此属性不一定能消除BUG。 2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。



	◆最终效果：



	SourceCodetoRun




    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"
    6. 
	
  6. 
		content="text/html;charset=gb2312"/> 
    7. 
	
  7. 
		<title>css</title> 
    8. 
	
  8. 
		<styletypestyletype="text/css"> 
    9. 
	
  9. 
		ul{list-style:none;}  
    10. 
	
  10. 
		li{height:100px;width:100px;background:#000;font-size:12px;}  
    11. 
	
  11. 
		lia{display:block;height:100px;width:100px;  
    12. 
	
  12. 
		position:relative;color:#fff;text-decoration:none;}  
    13. 
	
  13. 
		lia:hover{background:#ccc;}  
    14. 
	
  14. 
		lispan{display:none;}  
    15. 
	
  15. 
		lia:hoverspan{display:block;width:100px;height:100px;  
    16. 
	
  16. 
		background:#c00;position:absolute;top:50px;left:50px;color:#fff;}  
    17. 
	
  17. 
		</style> 
    18. 
	
  18. 
		</head> 
    19. 
	
  19. 
		<body> 
    20. 
	
  20. 
		<h2>使用CSS1做出的效果（无BUG）</h2> 
    21. 
	
  21. 
		<ul> 
    22. 
	
  22. 
		<li><ahrefahref="#"title="">鼠标移过来触发我吧！
    23. 
	
  23. 
		<span>哈哈，终于被你发现</span></a></li> 
    24. 
	
  24. 
		</ul> 
    25. 
	
  25. 
		</body> 
    26. 
	
  26. 
		</html> 
    27. 




	[可先修改部分代码再运行查看效果]

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机