IE8 jQ 设置 CSS 属性（宽度或边距）被忽略答案

【问题标题】：IE8 jQ set CSS properties (width or margin) are getting ignoredIE8 jQ 设置 CSS 属性（宽度或边距）被忽略
【发布时间】：2013-03-14 14:27:50
【问题描述】：

今天我在尝试操作图像时遇到了一个有趣的 IE8 情况。

我正在通过更改它们的 url 来替换加载的图像，当它们被加载时，我试图正确地挤压它们并以视口元素为中心（新图像不像它们的前辈那样是方形的）。但是在 IE8 中（还没有测试过 IE7，从同事那里听说 IE9 - 一切都很好）图像没有缩放，它们只是以原始大小下降，而我的

img.height(105);
img.css('margin-left', (shift?-shift:0));

被简单地忽略。这是因问题而被截断的代码。

    $('.people-images img').each(function () {
        var img = $(this);
        var oUrl = img.attr('src');

        oUrl = oUrl.replace(/[SM]Thumb/, 'LThumb');

        img.bind('load', function () {
            var img = $(this);
            if (this.width > this.height) {
                var shift = (this.width / (this.height / 105) - 105) / 2;
                img.height(105);
                img.css('margin-left', (shift?-shift:0));
            }
            else {
                var shift = (this.height / (this.width / 105) - 105) / 2;
                img.width(105);
                img.css('margin-top', (shift?-shift:0));
            }
        });

        img.attr('src', oUrl);
        img.attr('style', null);
        img.parent().attr('style', null);
    });

请寻找我的解决方案。

【问题讨论】：

标签： javascript internet-explorer-8 image-caching

【解决方案1】：

问题出在 IE 图像缓存及其处理事件处理程序的方式上。我在这一行 img.attr('style', null); 清除了 css。因此，只需将这种样式删除移到顶部即可解决问题。

$('.people-images img').each(function () {
    var img = $(this);
    var oUrl = img.attr('src');

    oUrl = oUrl.replace(/[SM]Thumb/, 'LThumb');
    img.attr('style', null);

    img.bind('load', function () {
        var img = $(this);
        if (this.width > this.height) {
            var shift = (this.width / (this.height / 105) - 105) / 2;
            img.height(105);
            img.css('margin-left', (shift?-shift:0));
        }
        else {
            var shift = (this.height / (this.width / 105) - 105) / 2;
            img.width(105);
            img.css('margin-top', (shift?-shift:0));
        }
    });

    img.attr('src', oUrl);
    img.parent().attr('style', null);
});

我觉得这很奇怪，因为即使缓存的图像确实会立即加载，IE 怎么会在执行范围的中间触发回调？

猜猜，在 src 替换之前放置与样式相关的代码也应该可以，但我没有确认。

img.attr('style', null);
img.attr('src', oUrl);

希望这会有所帮助！

【讨论】：