CSS兼容：IE6中背景圖片設置

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

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

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

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

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

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

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

　　以IE6中運行下面的代碼：

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兼容問題：一個IE6在no-repeat情況下依然重復背景圖片的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>

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

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兼容問題：一個IE6在no-repeat情況下依然重復背景圖片的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三個版本的CSS兼容速查手冊
十個修復IE6下bug技巧
探秘IE8 JavaScript功能超乎想象
技術前沿一段JS代碼輕松解決IE6-IE8的兼容性問題

責任編輯：佚名來源： 52css.com

CSS兼容 IE6

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看

CSS兼容：IE6中背景圖片設置