2

我有以下 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/

谢谢！​</p>

4

4 回答 4

4

您需要添加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;
}
于 2012-06-09T05:12:12.137 回答
2

我访问了jsFiddle链接和 Chrome 中的实时网站，该网站当前正在使用display:inline-block;修复程序以允许看到角落背景图像。

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

相反，省略 using 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 键），您可以使用Inspect Element查看图像...一旦显示在 Elements 选项卡中，您将在该区域中单击span正上方的标签。

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

底线：认为jsFiddle是一个出色的工具，但 Chrome 浏览器或任何浏览器应该是测试页面以进行生产工作时的唯一界面。它应该有最终决定权，没有中间人。

参考照片1： display:inline-block

版面受间隙影响。

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

布局不受影响。

于 2012-06-09T08:56:08.217 回答
1

简单地说图像的高度=）

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}
于 2015-02-13T13:04:38.033 回答
0

我用 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 时才会出现......

于 2015-12-17T01:49:03.600 回答