[css中解决方案]css中解决ie6下背景图片底部不对齐错位办法

更新时间:2017-08-10    来源:php基础    手机版     字体:

【www.bbyears.com--php基础】

 先来两段代码,一段是HTML代码,一段是CSS代码,下面的分析都是在这两段代码的基础上进行。

HTML代码:

 代码如下  
 
 
 
解决IE6背景图底部对齐出错的问题 
 
 
 
  
      
  
 
 
 


CSS代码:

 代码如下 .DivA{ 
 width:300px; 
 height:300px; 
 overflow:hidden; 
 border:1px solid #cccccc; 
 background:url("/201203311028034288.jpg") no-repeat 0% 100%; 
}  
.DivB{ 
 width:50px; 
 background-color:#6666ff; 
 margin:0 auto; 
}  

实例二

 代码如下



   

欢迎注册会员(以下信息均为必填且非常重要,请谨慎填写!)


解决办法

 

 代码如下



   

欢迎注d册会员(以下信息均为必填且非常重要,请谨慎填写!)


景图:

 

  代码都准备好了以后,我们就开始分析,把哪些躲起来的背景给揪出来!

 

  第一步,我们先设置DivB的高度为300px时,它的高度与父元素的高度是一样,这时显示是正常的:


IE6显示的效果,正常


其它览器显示的效果,正常

  第二步,我来试试把DivB的高度设为999px看看有什么效果:


IE6显示效果,背景图消失了


其它浏览器显示效果,正常

  问题出来了,当DivB的度为999px时,背景图不见了!下面我们一齐来把背景图找出来吧。

  第三步,我们DivB的高度设为350px看看:


IE6显示效果,这时背景图只被隐藏了一部分

 


其它浏览器显示效果,正常

  从上面的图可以看出,当子元素比父元素高时,父元素的背景如果设置了底部对齐,在IE6下父元素的背景会向下移,移动的像素=子元素的高-父元素的高。

 

 

解决办法:

  因为当你设置超出高度时隐藏,父元素的高度是固定的,所以我们可以设置background-positionY=父元素高度-背景图高度。但这样做有个缺点,就是当背景图片或父元素的高度改变时,background-positionY的值就要重新计算了。

本文来源:http://www.bbyears.com/jiaocheng/34734.html

猜你感兴趣