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元素


<!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