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/，现场网站在这里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

我访问了当前使用display:inline-block;修正的Chrome中的 jsFiddle 链接和实时网站，以便能够看到角落背景图片。

目前，我可以看到在背景阴影图像结束之后和社交按钮开始之前存在很大差距。这是因为使用了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错误。

我将使用您当前的修补程序和完整HTML页面的jsFiddle来说明这个jsFiddle错误，该页面已复制并粘贴到HTML面板中。什么都没有改变。

现在，使用Chrome开发者工具（点击键盘上的F12 ），然后您可以使用检查元素作为图像......一旦显示在元素标签中，您将在该区域内点击上方的span标记。

现在是有趣的部分，您可以通过删除复选标记（在右侧面板中展开时通过样式）来禁用display:inline-block;的样式，您将看到一个轻微的像素移位对于那些.png图片的Chrome，但可以肯定的是，它们仍然可见！

底线：将 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中编写代码时没有发生，只有在使用Windows版Chrome时才会发生......