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

今天我试图操纵图像时遇到了IE8的一个有趣的情况。IE8 jQ设置CSS属性（宽度或边距）被忽略

我正在更换加载的图像通过更改它们的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); 
    });

请查看我的自我解答。

来源

2013-03-14 Brock

问题原来是IE图像缓存和它处理事件处理程序的方式。 css在这条线上被我自己清除img.attr('style', null);。因此，简单地将这种样式删除解决了问题。

$('.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);

希望这会有所帮助！

来源

2013-03-14 14:27:50 Brock

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

回答

相关问题