背景图片在盒模型中的位置

最新推荐文章于 2023-03-20 16:32:18 发布

原创最新推荐文章于 2023-03-20 16:32:18 发布 · 424 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#border #html #url #ie #测试 #div

本文通过一个简单的HTML示例展示了不同浏览器中背景图片位置显示的区别。在IE6、7中背景从border内部开始显示，而在IE8及Firefox等浏览器中则从包括border在内的区域开始显示。

IE6、7：背景图片的位置是从border内开始的，也就是说包含了padding和content的空间

IE8、FF：背景图片的位置是从border（包括border）开始，包含了border、padding和content的空间

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script type="text/javascript" src="../js/jquery.pack.js" mce_src="js/jquery.pack.js"></mce:script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>背景测试</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #box{ width:60px; height:60px; margin:5px; padding:20px; border:dashed 13px; background-image:url(photo.gif) } #inner{ width:100%; height:100%; border:solid 1px; margin:0; padding:0; }</style> </head> <body> <div id="box"><div id="inner"></div></div> </body> </html>