Question

我目前正在用javascript编写脚本，以便将图像显示到网页中。这些图像加载了ajax请求，并且直接从jquery应用了css样式。该脚本适用于firefox / Opera / IE，但Google Chrome无法正确显示CSS。

当我使用谷歌浏览器调试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是一个包含图片网址和四个坐标（x，y，w，h）的javascript对象。

是否有人知道Google Chrome存在的问题以及如何解决此问题？

Answer 1

问题解决了！错误发生在CSS中。

只有刷新后，Google Chrome才会正确显示css样式

1 个答案: