IE8不支持style.backgroundSize的问题

r00_a2lBUR 2017-04-03 03:42:21
下面的一段代码:
var PointDIV= document.createElement("div");
PointDIV.style.background = 'url(./image/a.png)';
PointDIV.style.backgroundSize = '330px 320px';
PointDIV.style.width = '26px';
PointDIV.style.height = '33px';
PointDIV.style.borderStyle='none';
if ( json.PointType == 1 ) {
PointDIV.style.backgroundPosition = '-10px -5px';
}else{
PointDIV.style.backgroundPosition = '-91px -5px';
}

中,在QQ浏览器显示正常,在IE8浏览器和IE7浏览器显示不正常,据说是IE7和IE8不支持css3的缘故,问题是出在“PointDIV.style.backgroundSize = '330px 320px';”这句代码上,这张图片的实际大小不是330*320,比这大,所以显示出来的图片不正确。请问怎样改可以在IE7和IE8正确显示?
...全文
237 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
r00_a2lBUR 2017-04-05
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:
是的。IE7和IE8不支持backgroundSize 要调整图片的显示大小只有用img元素
但是用IMG之后,它的Position要怎么写?就是这句 “PointDIV.style.backgroundPosition = '-10px -5px';”,原来是backgroundPosition,现在要改成什么才能取一张图片的局部?
r00_a2lBUR 2017-04-05
  • 打赏
  • 举报
回复
引用 4 楼 jslang 的回复:
[quote=引用 3 楼 r00_a2lBUR 的回复:] [quote=引用 2 楼 jslang 的回复:] 是的。IE7和IE8不支持backgroundSize 要调整图片的显示大小只有用img元素
但是用IMG之后,它的Position要怎么写?就是这句 “PointDIV.style.backgroundPosition = '-10px -5px';”,原来是backgroundPosition,现在要改成什么才能取一张图片的局部?[/quote]

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	overflow: hidden;
	width: 100px;
	height: 100px;
}
#box img {
	width: 320px;
	height: 320px;
	margin-left: -100px;
	margin-top: -200px;
}
</style>
</head>
<body>

<div id="box">
	<img src="http://avatar.csdn.net/5/6/7/1_jslang.jpg">
</div>

</body>
</html>
[/quote] 效果不错,谢谢了。
天际的海浪 2017-04-05
  • 打赏
  • 举报
回复
引用 3 楼 r00_a2lBUR 的回复:
[quote=引用 2 楼 jslang 的回复:] 是的。IE7和IE8不支持backgroundSize 要调整图片的显示大小只有用img元素
但是用IMG之后,它的Position要怎么写?就是这句 “PointDIV.style.backgroundPosition = '-10px -5px';”,原来是backgroundPosition,现在要改成什么才能取一张图片的局部?[/quote]

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	overflow: hidden;
	width: 100px;
	height: 100px;
}
#box img {
	width: 320px;
	height: 320px;
	margin-left: -100px;
	margin-top: -200px;
}
</style>
</head>
<body>

<div id="box">
	<img src="http://avatar.csdn.net/5/6/7/1_jslang.jpg">
</div>

</body>
</html>
天际的海浪 2017-04-03
  • 打赏
  • 举报
回复
是的。IE7和IE8不支持backgroundSize 要调整图片的显示大小只有用img元素
似梦飞花 2017-04-03
  • 打赏
  • 举报
回复
ie低版本根本不支持background-size啊

87,994

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧