自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

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

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

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

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

  1. 　　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
 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
  7. <title>CSS兼容問題：一個IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com</title> 
  8. <styletypestyletype="text/css"> 
  9. #bigbox{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;}  
  10. #smallbox{height:75px;}/*撐開bigbox*/  
  11. #marginbox{margin-top:-20px;}/*向上margin的box*/  
  12. </style> 
  13. </head> 
  14.  
  15. <body> 
  16.  
  17. </head> 
  18. <body> 
  19. <dividdivid="bigbox"> 
  20.  <dividdivid="smallbox"></div> 
  21.  <dividdivid="marginbox"><imgsrcimgsrc="http://52css.com/skins/52css_logo4.png"width="200"height="90"/></div> 
  22. <dividdivid="content"></div> 
  23. </div> 
  24. </body> 
  25. </html> 
  26.  

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

SourceCodetoRun
 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
  7. <title>CSS兼容問題：一個IE6在no-repeat情況下依然重復(fù)背景圖片的BUG-www.52css.com</title> 
  8. <styletypestyletype="text/css"> 
  9. #bigbox{width:100%;background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat;}  
  10. #smallbox{height:75px;}/*撐開bigbox*/  
  11. #marginbox{margin-top:-20px;}/*向上margin的box*/  
  12. </style> 
  13. </head> 
  14.  
  15. <body> 
  16.  
  17. </head> 
  18. <body> 
  19. <dividdivid="bigbox"> 
  20.  <dividdivid="smallbox"></div> 
  21.  <dividdivid="marginbox"><imgsrcimgsrc="http://52css.com/skins/  
  22. 52css_logo4.png"width="200"height="90"/></div> 
  23. <dividdivid="content"></div> 
  24. </div> 
  25. </body> 
  26. </html> 
  27.  

【編輯推薦】

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

 


 

責(zé)任編輯：佚名 來源： 52css.com
CSS兼容IE6
相關(guān)推薦

2010-09-09 14:38:05

CSS背景圖片

2010-08-26 10:26:44

CSS

2010-09-06 15:06:29

IE6IE7Firefox

2011-08-18 17:24:34

iPhone開發(fā)UINavigatio

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-18 10:24:51

IE6IE7IE8

2010-08-18 15:22:28

IE6IE7Firefox

2010-09-16 13:17:31

IE6IE7IE8

2010-08-20 13:15:54

IE6IE7IE8

2010-08-27 15:38:21

兼容IE6IE7

2010-08-30 09:35:35

IE6IE7Firefox

2010-09-16 10:50:55

CSS兼容IE6

2011-06-03 15:41:27

CSS HACK

2010-08-18 15:57:14

IE6IE7IE8

2010-09-16 13:33:47

IE6IE7IE8

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-11 14:32:51

IE6CSS

2010-08-18 13:13:04

CSS兼容性IE6

2010-08-26 08:55:08

IE6CSS兼容性
點贊
收藏

51CTO技術(shù)棧公眾號