近期的一个项目是做一个微信公众号，其中有一个关于图片商品列表的显示，左侧是商品图片，右侧是商品基本信息，用的是如下代码段予以实现：
var div2 = document.createElement("div);
var img = document.createElement("img");
img.src = "../image/wine/"+array["pimg1"];
img.style = "width:25px;height:75px;margin-left:1.25rem;display:block";
div2.appendChild(img)
部署之后，发现在Android下是正常的，但在iPhone下测试布局不对，如下图所示：
Android手机下的显示效果
iPhone手机下的错误显示效果
上面第一张图是Android的测试图，效果正常，图片在左侧区域居中显示，商品信息在右侧显示，其中价格和积分中间有一定的间隔。
第二张效果图是在iPhone6下的测试结果，图片挤压严重，在左侧偏右位置显示，且积分与金额之间的间隔消失。
经过摸索，发现将上面代码中img.style这一段改成如下方式可以解决这个问题，即将img.style的具体内容逐条展开，方可被iPhone识别，效果图如下所示：
img.style.width = "25px";
img.style.height = "75px";
img.style.margin = "0 auto";
img.style.display = "block"
iPhone下的正确显示效果
这样，就较好地解决了使用js创建CSS样式在iPhone下显示异常的问题，亲证有效。
感谢阅读此文，欢迎关注“斯沃勒科教工作室”，期待与您一起分享实用安全知识和代码开发技巧，评论必回哦！
