天蚕土豆,大主宰天蚕土豆,欢乐颂第一季

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS兼容：IE6中背景圖片設(shè)置

你對CSS兼容：IE6中背景圖片設(shè)置問題是否了解，這里和大家分享一下，相信本文介紹一定會讓你有所收獲。

CSS兼容：一個IE6在no-repeat情況下依然重復(fù)背景圖片的BUG

背景圖片的設(shè)置是CSS布局時常用的一種屬性，應(yīng)用background的url，引入背景圖片，可以設(shè)置為不重復(fù)平鋪，如下面的代碼：

 
 
 
  
  
  　　background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;

　　◆在大多數(shù)情況下，此設(shè)置不會有任何問題。背景圖片按設(shè)置的形式呈現(xiàn)，不會平鋪于容器，無論容器是何寬度與高度。但在IE6下，有一種情況，如果未定義寬高，則會產(chǎn)生即使定義了no-repeat，背景圖片依然重復(fù)的BUG。

　　以IE6中運行下面的代碼：

SourceCodetoRun

 
 
 
  
  
  
  
  
  
 
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
   
  
  
   
  
  
   
  
  
  CSS兼容問題：一個IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com 
  
  
   
  
  
  #bigbox{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;}  
  
  
  #smallbox{height:75px;}/*撐開bigbox*/  
  
  
  #marginbox{margin-top:-20px;}/*向上margin的box*/

　　◆解決的辦法很簡單，為容器定義寬度即可。如果沒有實際寬度，可以定義為100%。此BUG不需要額外的HACK，只需要在使用時注意避免即可。解決后的代碼如下，在IE6中運行：

SourceCodetoRun

 
 
 
  
  
  
  
  
  
 
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
   
  
  
   
  
  
   
  
  
  CSS兼容問題：一個IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com 
  
  
   
  
  
  #bigbox{width:100%;background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;}  
  
  
  #smallbox{height:75px;}/*撐開bigbox*/  
  
  
  #marginbox{margin-top:-20px;}/*向上margin的box*/

52css_logo4.png"width="200"height="90"/>

網(wǎng)站標(biāo)題：CSS兼容：IE6中背景圖片設(shè)置
標(biāo)題來源：http://m.fisionsoft.com.cn/article/djhgcoc.html

新聞中心

其他資訊