CSS兼容：IE6中背景图片设置

2023-1-14

你对CSS兼容：IE6中背景图片设置问题是否了解，这里和大家分享一下，相信本文介绍一定会让你有所收获。

CSS兼容：一个IE6在no-repeat情况下依然重复背景图片的BUG

背景图片的设置是CSS布局时常用的一种属性，应用background的url，引入背景图片，可以设置为不重复平铺，如下面的代码：

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

　　◆在大多数情况下，此设置不会有任何问题。背景图片按设置的形式呈现，不会平铺于容器，无论容器是何宽度与高度。但在IE6下，有一种情况，如果未定义宽高，则会产生即使定义了no-repeat，背景图片依然重复的BUG。

　　以IE6中运行下面的代码：

SourceCodetoRun
 

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

 　　◆解决的办法很简单，为容器定义宽度即可。如果没有实际宽度，可以定义为100%。此BUG不需要额外的HACK，只需要在使用时注意避免即可。解决后的代码如下，在IE6中运行：

SourceCodetoRun
 

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

【编辑推荐】

  1. IE6中常见CSS兼容性解决十大技巧
  2. IE6 IE7 IE8三个版本的CSS兼容速查手册
  3. 十个修复IE6下bug技巧
  4. 探秘IE8 JavaScript功能超乎想象
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

 

版权声明：
作者：后浪云
链接：https://www.idc.net/help/396175/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图