-1

我目前正在用 javascript 编写脚本，以便将图像显示到网页中。这些图像是通过 ajax 请求加载的，并且直接从 jquery 应用 css 样式。该脚本适用于 firefox/Opera/IE，但 Google Chrome 无法正确显示 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是一个 javascript 对象，包含一个图像 url 和四个坐标 (x, y, w, h)。

有人知道谷歌浏览器有什么问题以及如何解决这个错误吗？

4

1 回答 1

0

问题解决了！错误出现在 CSS 中。

于 2012-10-30T10:17:15.497 回答