垂直对齐文本 - 在 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 或任何您可能需要定位的浏览器的类.

我编写的脚本以及我如何进行此操作所必需的所有内容，只需将包含每个 div 的 img-right 设置为具有它包含的 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() });
}