1

みなさん、こんにちは。画像の幅と高さを計算し、クレジット/キャプションで使用するために画像の右下にテキスト文字列を適切に配置するスクリプトを書くことができました。

IE8 以外のすべてのブラウザーで完全に生成、計算、表示することができました。なんらかの理由で、IE8 で画面から吹き飛ばされてしまい、IE8 を使用しているときに計算用の条件付き関数を使用できるように JavaScript を改善する理由がわかりません。

何かアドバイス？

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;
        }
    });
});
4

1 に答える 1

1

これが私がそれを行う方法です.jsスクリプトのコードを処理する限り、ブラウザにとってはそれほど多くの作業ではありません. これは、このようなものには少し不要です。

html を変更して、画像と縦書きのテキストを Figure 要素で囲み、縦書きのテキストもスパンではなくフィグキャプションにしました。

CSS を変更して、img-right div が相対的な位置、および inline-block になり、垂直テキストが右と下の位置が 0 またはその他の絶対値になるように変更して、それらが正しくすべて均等に正しく配置されるようにしました。ただし、IE でまだずれている場合は、IE7 または 8、または対象とする必要があるブラウザを指定する html タグのクラスを使用して、IE の右と下の位置の値を変更するだけです。

私が書いたスクリプトと、これに必要なすべてのスクリプトは、それぞれの 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() });
}
于 2013-04-22T19:31:20.523 に答える