如何覆蓋css img屬性？

我注意到Internet Explorer中twitter bootstrap（2.2.1）和ad-gallery之間的奇怪衝突。如何覆蓋css img屬性？

原來在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;}

如何覆蓋這些屬性？

btw。谷歌Chrome和Mozilla Firefox沒有任何問題。您可以使用here的原始引導程序min css文件檢查該示例，該文件不起作用。

以下是從here修改bootstrap-modified.min.css的示例。

來源

2012-11-01 motto

什麼是你想用做'.ad-gallery'中的圖像？因爲默認情況下，它們將基於引導CSS自動調整寬度和高度 - 所以我很困惑你想要完成什麼？ – Andy

在哪個版本的IE中你看到了這個？我在IE9中試過，它似乎工作。 http://jsfiddle.net/ty6aB/5/ –

@Andy在IE中增加了一個工作和非工作版本。你明白這個問題嗎？ – motto

如觀察到的，父DIV（其具有類廣告圖像）的IMG的具有以下在線樣式：

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

這是實際上你的原因爲什麼你的寬度和高度都是零。

哦，我知道你沒有放置這些樣式，因爲它在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; 
    }

來源

2012-11-21 13:29:04 jinmichaelr

事實證明，解決方法的作品。偉大的分析，很好的答案。 – motto

是的。確實！解決方法很好！謝謝！ –

我相信DOM是一個選擇器層次結構的問題。嘗試：

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

來源

2012-11-13 10:04:29 wandarkaf

我已經添加了一個css行，但這不是一個解決方案。 http://bedavaemlaksitesi.com/adgallery-bootstrap-conflict/ilan-detay-3.html – motto

請檢查網頁源代碼中的樣式標籤之間的界限。 – motto

$(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-23 14:09:11 liminspace

如何覆蓋css img屬性？

回答

相關問題