CSS背景不适用于Chrome

Question

我有以下HTML和CSS代码，您能否告诉我为什么它可以在FF，IE9，jsfiddle上运行，而不能在带有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/

谢谢！

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链接和实时网站 display:inline-block; 修复了允许看到角落背景图像的问题。

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

而是使用display: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 （已复制并粘贴到HTML面板中）来说明jsFiddle错误。 没有任何改变。

现在，使用Chrome开发人员工具（ 在键盘上按F12键 ），然后可以将Inspect Element用于图像...一旦显示在Elements标签中，您将在该区域中单击右上方的span标签。

现在有了有趣的部分，您可以禁用display:inline-block;的样式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中编写代码时并未发生此问题，仅在使用Windows版本的Chrome时才发生此问题。