html - CSSの背景がChromeで機能しない

Question

私は次のHTMLとCSSコードを持っていますが、なぜそれがFF、IE9、jsfiddleで動作し、GoogleChromeのライブサイトでは動作しないのか教えてください。

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>

score 4 · Accepted Answer

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

score 2 · Accepted Answer

jsFiddleリンクとChromeのライブWebサイトの両方にアクセスしました。現在、このdisplay:inline-block;修正プログラムを使用して、コーナーの背景画像を表示できるようにしています。

現在、背景の影の画像が終了してからソーシャルボタンが開始するまでに大きなギャップがあることがわかります。これはinline-block使用されているためです。

代わりに、（この回答全体display:inline-block;を読んだ後）使用を省略し、、、、、のすべてのパディング値を定義するだけです。toprightbottomleft

そうは言っても、ライブWebページでオブジェクトをフローティングしているのでpadding-right、の値を指定し1pxます。

これらの2つの方法のいずれかが機能します。

方法1-速記パディング（上、右、下、左）：

padding: 0 1px 18px 0;

方法2-不足しているpadding-right値を指定する：

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

これで、Webページのレイアウトを変更せずに、背景画像とともにポスター画像を表示できます...そして、その大きなギャップもなくなりました。

しかし、この答えは、jsFiddleで機能するが、ライブWebサイトでは機能しない理由を説明するまでは完全ではありません。簡単な答えは、jsFiddleはサンドボックスであり、完璧ではないということです。これはjsFiddleのバグと見なすことができます。

このjsFiddleのバグを、現在の修正と、HTMLパネルに直接コピーして貼り付けた完全なHTMLページのjsFiddleを使用して説明します。何も変更されていません。

これで、Chromeデベロッパーツール（キーボードのF12キーを押す）を使用して、画像の要素の検査を使用できます... [要素]タブに表示されたら、spanすぐ上のタグをクリックする領域に移動します。

ここで楽しい部分があります。チェックマークdisplay:inline-block;を削除して（右パネルで展開したときにスタイルを使用して）のスタイルを無効にできます。これらの.png画像のChromeでわずかなピクセルシフトが表示されますが、確かに、それらは引き続き表示されます。！！

結論：jsFiddleは優れたツールであると考えてください。ただし、本番環境でページをテストするときは、Chromeブラウザまたは任意のブラウザを唯一のインターフェイスにする必要があります。仲介なしで最終決定権を持つ必要があります。

参考写真1： display:inline-block

レイアウトはギャップの影響を受けます。

参考写真2： padding-right: 1px;

レイアウトは影響を受けません。

score 1 · Accepted Answer

画像の高さを入力するだけです=）

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

score 0 · Accepted Answer

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を使用しているときにのみ発生します...

html - CSSの背景がChromeで機能しない

4 に答える 4

Related

Reference