Question

大家下午好，我已经设法编写了一个脚本来计算图像的宽度和高度，并在图像的右下方正确放置了一串文本，以便使用信用/字幕。

我设法让它在IE8以外的所有浏览器中完美地生成，计算和显示。出于某种原因，它在IE8中脱离屏幕，我似乎无法弄清楚它为什么这样做并改进我的JavaScript以便在使用IE8时可能有计算的条件函数。

有什么建议吗？

$(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 divs是位置相对的，并且是inline-block，而垂直文本是绝对的，右边和底部位置为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() });
}

垂直对齐文本 - 在IE8中无法正确显示

1 个答案: