How to override css img properties?

问题

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

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

How to override these properties ?

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.

Here is the working example with modified bootstrap-modified.min.css from here.

回答1:

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;

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

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.

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

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

回答2:

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

回答3:

Is a problem with selector hierarchy with the DOM, I believe. Try:

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

来源：https://stackoverflow.com/questions/13179679/how-to-override-css-img-properties

标签

css

html

overriding