Question

我注意到Internet Explorer中twitter bootstrap（2.2.1）和ad-gallery之间发生了奇怪的冲突。

在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没有任何问题。您可以使用here中的原始bootstrap min css文件检查示例，该文件无效。

以下是来自here的已修改bootstrap-modified.min.css的工作示例。

Answer 1

如所观察到的， img 的父 div （具有广告图片类）具有以下内嵌样式：

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

这实际上是 img 的宽度和高度为零的原因。

哦，我知道您没有放置这些样式，因为它在Chrome（或FF）中具有不同的值。那么，问题何在？是的，是的，它来自JavaScript。

我检查了您使用 jquery.ad-gallery.js 的插件并进行了一些调试。

我发现该插件使用 img 的维度计算广告图片容器的尺寸和位置。使用预加载（缓存）图像的维度获取img的维度。

IE的问题在于它返回的图像的零值维度导致其父级（使用它计算高度和宽度）也具有零值维度。

尝试检查是否可以解决此JS问题。我相信一旦解决了这个问题，您的问题也将在没有其他CSS样式的情况下得到解决。

作为解决方法，请将以下规则添加到您的css中：

    .ad-image {
        left: 0 !important;
        top: 0 !important;
        width: inherit !important;
        height: inherit !important;
    }

Answer 2

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]-->

Answer 3

我相信选择器层次结构与DOM存在问题。尝试：

.ad-gallery img{width:auto!important;}

如何覆盖css img属性？

3 个答案: