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版本時發生......