CSS背景与镀铬工作 [英] CSS background not working with Chrome

问题描述

我有以下的HTML和CSS code，可以请你告诉我，为什么它适用于FF，IE9，的jsfiddle而不是在谷歌浏览器？

I have the following HTML and CSS code, can you please tell me why it works on FF, IE9, jsfiddle and NOT on the live site with Google Chrome?

HTML

<p>
    <a href="http://tambnguyen.com/wp-content/uploads/2012/05/256501557_1280.jpg">
        <span class="img_wrapper">
            <img class="tn" src="http://tambnguyen.com/wp-content/uploads/2012/05/256501557_1280-580x326.jpg"/>
        </span>
    </a>
</p>

CSS：

img.with-borders, img.tn { 
    margin: 5px 0 0 0;
    padding: 8px;
    background: #f1f1f1;
    border: solid #777;
    border-width: 1px 2px 2px 1px;
    box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
span.img_wrapper {
    background: url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderright-shadow2.png') no-repeat right bottom;
    padding-bottom: 14px;
}
img.with-borders:hover, img.tn:hover, img.post_img:hover, div.related_post_thumb:hover  { 
    border-color: #000;
    filter: alpha(opacity=80);
    opacity: 0.80;
}

本的jsfiddle在这里 http://jsfiddle.net/gNtea/ 和直播现场就在这里 http://tambnguyen.com/4493-chemin-vert-giacomo-miceli/

感谢您！

推荐答案

您需要添加显示：inline-block的; 来的img_wrapper，如：

you need to add display: inline-block; to the img_wrapper, like:

span.img_wrapper {
  display: inline-block;
  background: url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('http://tambnguyen.com/wp-content/themes/Polished/images/et-image-sliderright-shadow2.png') no-repeat right bottom;
  padding-bottom: 14px;
}

这篇关于CSS背景与镀铬工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！