3

Twitter ブートストラップ(2.2.1) とInternet Explorerの広告ギャラリーの間に奇妙な競合があることに気付きました。

bootstrap.min.css の次の行が原因で問題が発生し、画像が表示されないことが判明しました。

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}

これら2つを削除すると、すべてが正常に機能します:

width:auto\9;height:auto;

しかし、それらを削除する代わりに、これらのプロパティをオーバーライドしようとしていますが、これまでのところ機能していません:

.ad-gallery img{width:default;height:default;}
.ad-gallery img{width:none;height:none;}
.ad-gallery img{width:auto;height:auto;}

これらのプロパティをオーバーライドする方法は?

ところで。google chrome と mozilla firefox では問題ありません。hereから元のブートストラップ最小cssファイルの例を確認できますが、これは機能していません。

hereから変更された bootstrap-modified.min.css を使用した実際の例を次に示します。

4

3 に答える 3

2

ご覧のとおり、 imgの親div (クラスad-imageを持つ) には、次のインライン スタイルがあります。

    left: 230px;
    top: 160px;
    width: 0px;
    height: 0px;

これが実際にimgの幅と高さがゼロの原因です。

Chrome (または FF) では値が異なるため、これらのスタイルを配置しなかったことは知っています。では、問題はどこにあるのでしょうか。ええ、そうです、それはJavaScriptからのものです。

jquery.ad-gallery.jsを使用したプラグインを確認し、デバッグを行いました。

プラグインがimgの寸法を使用してad-imageコンテナの寸法と位置を計算していることがわかりました。img のサイズは、プリロードされた (キャッシュされた) 画像のサイズを使用して取得されます。

IE の問題は、画像の値が 0 の寸法を返すことで、それを使用して高さと幅が計算される親の寸法が 0 になることです。

この JS の問題を解決できるかどうかを確認してください。これが解決されれば、CSS スタイルを追加しなくても問題は解決されると思います。

回避策として、CSS に次のルールを追加します。

    .ad-image {
        left: 0 !important;
        top: 0 !important;
        width: inherit !important;
        height: inherit !important;
    }
于 2012-11-21T13:29:04.950 に答える
1

JS

$(function(){
    var galleries = $('.ad-gallery').adGallery({
        effect: ($.browser.msie) ? 'none' : 'slide-hori',
        callbacks: {
            afterImageVisible: function() {
                if ($.browser.msie) {
                    var img = this.current_image.find('img');
                    var size = this._getContainedImageSize(img.width(), img.height());
                    img.width(size.width).height(size.height);
                    img.css('margin-left', (this.current_image.width() - img.width()) / 2);
                    img.css('margin-top', (this.current_image.height() - img.height()) / 2);
                }
            }
        }
    });
});

CSS

<!--[if IE]>
<style>
    .ad-gallery .ad-image {
        left: 0 !important;
        top: 0 !important;
        width: inherit !important;
        height: inherit !important;
    }
</style>
<![endif]-->
于 2012-12-23T14:09:11.177 に答える
0

DOM のセレクター階層の問題だと思います。試す：

.ad-gallery img{width:auto!important;}
于 2012-11-13T10:04:29.647 に答える