谷歌瀏覽器僅在刷新後正確顯示css樣式

-1

我目前正在使用JavaScript編寫腳本以便將圖像顯示到網頁中。這些圖像加載了一個Ajax請求，並且直接從jquery應用css風格。該腳本適用於Firefox/Opera/IE，但Google Chrome無法正確顯示CSS。谷歌瀏覽器僅在刷新後正確顯示css樣式

當我使用Google Chrome調試HTML頁面時，代碼是正確的，圖像包含正確的CSS樣式。如果我在css編輯器面板中取消選中並檢查屬性，則chrome會刷新樣式並正確顯示所有元素。

的代碼是下面

function displayCroppedFace(faceData, parentElem) { 
    var randomid = Math.floor(Math.random() * Math.pow(2, 32)); 
    $("#" + parentElem).append("<div id=\"faceImg_border_" + randomid + "\" />"); 
    $("#faceImg_border_" + randomid).append("<div id=\"faceImg" + randomid + "\" />"); 
    $("#faceImg" + randomid).attr('class','cropped_model'); 
    $('#faceImg' + randomid).append('<img id="faceImg' + randomid + '_img" src="' + faceData.image_url + '"/>'); 
    $('#faceImg' + randomid + '_img').load(function() { 
     crop($(this), faceData.x, faceData.y, faceData.w, faceData.h); 
    }); 
} 

function crop(imgObj, x, y, width, height) { 
    var originalWidth = imgObj.width(); 
    var originalHeight = imgObj.height(); 
    var scale_x = imgObj.parent().width()/(width + 20); 
    var scale_y = imgObj.parent().height()/(height + 20); 


    imgObj.css({ 
     'position' : 'absolute', 
     'display' : 'block', 
     'left' : (-x * scale_x - 5) + 'px', 
     'top' : (-y * scale_y - 5) + 'px', 
     'width' : (originalWidth * scale_x + 10) + 'px', 
     'height' : (originalHeight * scale_y + 10) + 'px', 
     'z-index' : '10' 
    }); 
}

faceData可見是包含圖像URL和四個座標（X，Y，W，H）javascript對象。

是否有人知道Google Chrome的問題以及如何解決此錯誤？

來源

2012-10-30 reevolt

你能粘貼你的東西。 –

在你的裁剪函數裏面，你可以做一個'console.log（width，height）'看看它是否爲零？ –

問題解決了！錯誤在CSS中。

來源

2012-10-30 10:17:15 reevolt

谷歌瀏覽器僅在刷新後正確顯示css樣式

回答

相關問題