3

我注意到twitter bootstrap (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;}

当我删除这两个时，一切正常：

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 没有任何问题。您可以从此处使用原始 bootstrap min css 文件检查示例，该文件不起作用。

这是从此处修改 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的插件并进行了一些调试。

I found out that the plugin is computing the dimension and position of the ad-image container using the dimension of the img. The dimension of the img is acquired using the dimension of the preloaded (cached) image.

The problem with IE is that it's returning back zero-value dimensions for the image causing its parent, which height and width are computed using it, to also have zero-value dimensions.

Try to check if you can solve this JS issue. I believe that once this is solved, your issue will also be solved without additional CSS styles.

As a work-around, add the following rule to your 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 回答