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

作者：admin 2010-08-18 13:27:15

本文向大家介紹一下CSS兼容：一個(gè)IE6在no-repeat情況下依然重復(fù)背景圖片的BUG，背景圖片的設(shè)置是CSS布局時(shí)常用的一種屬性。

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

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

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

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

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

　　以IE6中運(yùn)行下面的代碼：

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<title>CSS兼容問題：一個(gè)IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com</title> 
<styletypestyletype="text/css"> 
#bigbox{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;}  
#smallbox{height:75px;}/*撐開bigbox*/  
#marginbox{margin-top:-20px;}/*向上margin的box*/  
</style> 
</head> 
 
<body> 
 
</head> 
<body> 
<dividdivid="bigbox"> 
 <dividdivid="smallbox"></div> 
 <dividdivid="marginbox"><imgsrcimgsrc="http://52css.com/skins/52css_logo4.png"width="200"height="90"/></div> 
<dividdivid="content"></div> 
</div> 
</body> 
</html>

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

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<title>CSS兼容問題：一個(gè)IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com</title> 
<styletypestyletype="text/css"> 
#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*/  
</style> 
</head> 
 
<body> 
 
</head> 
<body> 
<dividdivid="bigbox"> 
 <dividdivid="smallbox"></div> 
 <dividdivid="marginbox"><imgsrcimgsrc="http://52css.com/skins/  
52css_logo4.png"width="200"height="90"/></div> 
<dividdivid="content"></div> 
</div> 
</body> 
</html>

【編輯推薦】

IE6中常見CSS兼容性解決十大技巧
IE6 IE7 IE8三個(gè)版本的CSS兼容速查手冊(cè)
十個(gè)修復(fù)IE6下bug技巧
探秘IE8 JavaScript功能超乎想象
技術(shù)前沿一段JS代碼輕松解決IE6-IE8的兼容性問題

責(zé)任編輯：佚名來源： 52css.com

CSS兼容 IE6