近期的一個項(xiàng)目是做一個微信公眾號，其中有一個關(guān)于圖片商品列表的顯示，左側(cè)是商品圖片，右側(cè)是商品基本信息，用的是如下代碼段予以實(shí)現(xiàn)：

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)

部署之后，發(fā)現(xiàn)在Android下是正常的，但在iPhone下測試布局不對，如下圖所示：

Android手機(jī)下的顯示效果

iPhone手機(jī)下的錯誤顯示效果

上面第一張圖是Android的測試圖，效果正常，圖片在左側(cè)區(qū)域居中顯示，商品信息在右側(cè)顯示，其中價(jià)格和積分中間有一定的間隔。

第二張效果圖是在iPhone6下的測試結(jié)果，圖片擠壓嚴(yán)重，在左側(cè)偏右位置顯示，且積分與金額之間的間隔消失。

經(jīng)過摸索，發(fā)現(xiàn)將上面代碼中img.style這一段改成如下方式可以解決這個問題，即將img.style的具體內(nèi)容逐條展開，方可被iPhone識別，效果圖如下所示：

img.style.width = "25px";

img.style.height = "75px";

img.style.margin = "0 auto";

img.style.display = "block"

iPhone下的正確顯示效果

這樣，就較好地解決了使用js創(chuàng)建CSS樣式在iPhone下顯示異常的問題，親證有效。

感謝閱讀此文，歡迎關(guān)注“斯沃勒科教工作室”，期待與您一起分享實(shí)用安全知識和代碼開發(fā)技巧，評論必回哦！