CSS背景不适用于Chrome

Question

我有以下HTML和CSS代码，请告诉我为什么它可以在FF，IE9，jsfiddle上运行，而不是在谷歌浏览器的实时网站上运行？

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/，以及Live网站是在这里http://tambnguyen.com/4493-chemin-vert-giacomo-miceli/

谢谢

Answer 1

你需要添加display: inline-block;到img_wrapper，如：

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

Answer 2

我参观了两个的jsfiddle链接，并在Chrome当前正在使用的display:inline-block;修复，让拐角处的背景图像中可以看出该直播网站。

目前，我可以看到在背景阴影图像结束之后和社交按钮开始之前有很大差距。这是因为使用了inline-block。

相反，忽略使用display:inline-block;（读这整个答案后），只是定义top，right，bottom，left所有的填充值。

这就是说，因为你是浮动对象在你的网页，给padding-right值1px。

这两种方法都可以。

方法1 - 速记填充（上，右，下，左）：

padding: 0 1px 18px 0; 

方法2 - 指定缺失padding-right值：

padding-bottom: 18px; 
padding-right: 1px; 

现在，您可以查看在不改变网页布局的情况下将海报图像与背景图像...进行比较，并且大幅差距也没有了。

但是这个答案是不完整的，直到我解释为什么它在jsFiddle上工作，而不是直播网站。简单的答案是jsFiddle是一个沙盒，并不完美。这可以被认为是一个jsFiddle错误。

我会说明这个jsFiddle问题，包括您当前的修补程序和完整HTML页面的jsFiddle，它们被复制并粘贴到HTML面板中。没有什么改变。现在

，使用Chrome开发者工具，你就可以使用检查元素的图像......一旦在Elements标签所示（键盘上命中F12），你会在该地区的点击在上面的span标签上。

现在到了有趣的部分，你可以（当右侧面板扩展通过样式）通过移除勾选禁用的display:inline-block;的风格，你会看到在Chrome轻微像素移位对于那些.png格式的图像，但到可以肯定，他们仍然可见！

底线：考虑的jsfiddle一个很好的工具，但Chrome浏览器，或任何浏览器，测试页面生产工作的时候应该是唯一的接口。它应该有最后的发言没有中间人。

---

参考图片1：display:inline-block

---

参考图片2：padding-right: 1px;

Answer 3

简而言之图像的高度=）

li.current-menu-item a { 
background: url("../images/bg_menu.png") repeat-x;  
height: 35px; 
} 

Answer 4

我使用Chrome添加了同样的问题，但我的修正更是离奇

这是在体内包装我原来的CSS代码

background-image: url(../../img/layout/bgOutside-rtl.jpg); 

但重复的图像，这不是我想要的。我尝试了其他地方提供的解决方案，但在大多数情况下，这使情况更糟

我加入这个

background-image: url(../../img/layout/bgOutside-rtl.jpg); 
background-repeat: no-repeat; 

PHPStorm认为这是一个更好的选择

background: url(../../img/layout/bgOutside-rtl.jpg) no-repeat; 

这似乎合乎逻辑，但它没有工作。 Chrome似乎将此视为一条不会显示任何图像的指令。

我得到这个工作的唯一办法是回到

background-image: url(../../img/layout/bgOutside-rtl.jpg); 
background-repeat: no-repeat; 

进入数字。它工作正常，所有浏览器都能正确显示页面。

更奇怪的事实是写在Linux的代码时didnt发生此问题，只使用Chrome的Windows版本时发生......