垂直對齊文本 - 在IE8中無法正常顯示

Question

大家下午好， 我已經設法編寫了一個腳本，用於計算圖像的寬度和高度，並在圖像的右下角正確放置一串文本使用信用/標題。

我已經設法讓它在IE8以外的所有瀏覽器中完美地生成，計算和顯示。出於某種原因，它是在IE8屏幕上吹，我似乎無法弄清楚它爲什麼這樣做，並提高我的JavaScript可能有使用IE8計算的條件函數。

有什麼建議嗎？

http://jsfiddle.net/jodriscoll/u26vZ/

$(function ($) { 
    // jQuery is passed as the first arg $ 
    $('.img-right img,.img-left img').bind('load', function() { 
     var $img = $(this), 
      imgHeight = $img.height(), 
      imgWidth = $img.width(); 
     $img.siblings('p').width(imgWidth); 
     $img.siblings('span').width(imgHeight); 
     $img.siblings('.credit').css({ 
      left: imgWidth + 6, 
      top: imgHeight - 10 
     }); 
    }).each(function() { 
     // we need to force the "load" event to fire if it was already complete: 
     // technique taken from https://gist.github.com/268257 
     if (this.complete || this.complete === undefined) { 
      var src = this.src; 
      // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
      // data uri bypasses webkit log warning 
      this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
      this.src = src; 
     } 
    }); 
}); 

Answer 1

這是我怎麼會去這樣做，這不是爲瀏覽器就處理您的JS腳本的代碼儘可能多的工作。這對於這樣的事情來說有點不必要。

我已經更改了html，因此圖像和垂直文本被圖元包裹，並且垂直文本是一個figcaption而不是一個span。

我改變了CSS，這樣img-right div是相對位置和內嵌塊，而垂直文本是絕對位置，右邊和底邊位置是0或者任何東西，這樣它們就可以正確地定位，這應該適用於所有瀏覽器，但是如果它仍然在IE中被錯誤對齊，你可以簡單地修改IE的右側和底部位置值，特別是使用html標籤中的類來指定它的ie7或8，或者你可能需要的任何瀏覽器目標。

我編寫的腳本以及所有這些對於我如何去做的事情都是必需的，只是簡單地設置每個包含img-right的div，使其寬度爲它包含的img的寬度。這是因爲在容器上設置了寬度，並且會使段落文本根據img寬度正確且很好地包裝。因此可以將垂直文本偏移到容器的右側。

下面是修改搗鼓我所做的：http://jsfiddle.net/jaredwilli/u26vZ/11/ 腳本現在只是：

var img = $('.img-right, .img-left'); 
for (var i = 0; i < img.length; i++) { 
    $(img[i]).css({ width: $(img[i]).find('img').width() }); 
}