如何覆盖css img属性？ [英] How to override css img properties?

问题描述

我注意到 twitter bootstrap （2.2.1）和广告库。

I have noticed weird conflict between twitter bootstrap (2.2.1) and ad-gallery in Internet Explorer.

原来这个bootstrap.min.css中的行导致问题并且图像没有显示：

Turns out this lines in bootstrap.min.css causing a problem and images don't show up:

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

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

when i remove these two everything works normally:

width:auto\9;height:auto;

但是我没有删除那些我试图覆盖这些属性但是到目前为止没有一个工作：

But instead of removing those i am trying to override those properties but none of this worked so far:

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

如何覆盖这些属性？

btw。谷歌Chrome和Mozilla Firefox没有任何问题。
您可以使用此处，它不起作用。

btw. there isn't any problems with google chrome and mozilla firefox. You can check the example with original bootstrap min css file from here, which is not working.

以下是来自这里。

推荐答案

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

As observed, the parent div (which has a class ad-image) of the img has the following in-line styles:

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

这实际上是你的 img 也有宽度和高度的原因零。

This is actually the cause why your img also has the width and height of zero.

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

Oh, I know you didn't place those styles because it has a different value in Chrome (or in FF). So, where is the problem coming? Yeah, right, it is from the JavaScript.

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

I checked the plugin that you used jquery.ad-gallery.js and made some debugging.

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

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.

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

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.

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

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.

作为解决方案，添加以下内容规则到你的CSS：

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

这篇关于如何覆盖css img属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！