Fond de CSS ne fonctionne pas avec Chrome

J'ai le texte suivant du code HTML et CSS, pouvez-vous s'il vous plaît dites-moi pourquoi il fonctionne sur FF, IE9, jsfiddle et PAS sur le site en direct avec 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;
}

Le jsfiddle est ici http://jsfiddle.net/gNtea/, et le site en ligne est ici http://tambnguyen.com/4493-chemin-vert-giacomo-miceli/

Merci!

  • Désolé, pouvez-vous fournir des captures d'écran? En regardant dans JFiddle avec IE9 et Chrome, ils sont identiques.
  • Pour une chose, les transitions ne fonctionnent pas avec filter.
InformationsquelleAutor Tam N. | 2012-06-09
  1. 4

    vous devez ajouter display: inline-block; à la img_wrapper, comme:

    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;
}
    • OMG MERCI!!!!!! J'ai été à ce jours. Même posté la même question sur ici il ya quelques nuits, sans un peu de chance. Vous êtes mon héros!
    • Btw, pourquoi ne pas travailler sur un site en production, mais il fonctionne sur jsfiddle?
    • J'ai fourni une réponse qui s'adresse pourquoi il fonctionne sur jsFiddle. Pour clarifier, la réponse fournie par Chris Mohr n'est pas mauvais, juste différent.
    InformationsquelleAutor Chris Mohr
  2. 2

    J'ai visité le jsFiddle lien et la site de google Chrome qui est actuellement à l'aide de la display:inline-block; correctif pour permettre le coin des images de fond pour être vu.

    Actuellement, je peux voir qu'il y a un grand écart après l'arrière-plan de l'ombre des images de la fin et avant la Social Boutons start. C'est à cause de inline-block utilisé.

    Au lieu de cela, omettre l'aide de display:inline-block; (après la lecture de ce ensemble réponse) et il suffit de définir toutes les valeurs de remplissage pour top, right, bottom, left.

    Cela dit, et parce que vous êtes objets flottants dans votre page web, donner padding-right une valeur de 1px.

    L'une de ces deux méthodes de travail.

    Méthode 1 - la Sténographie de remplissage (haut, droite, bas, gauche):

    padding: 0 1px 18px 0;

    Méthode 2 - Spécification de manque padding-right valeur:

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

    Maintenant, vous pouvez voir l'Affiche de l'Image avec les images d'arrière-plan sans changer la mise en page de la page web... et que le grand écart est allé trop.

    Mais cette réponse n'est pas complète jusqu'à ce que j'ai expliquer pourquoi cela fonctionne sur jsFiddle, mais pas le site. La réponse est simple, jsFiddle est un bac à sable et n'est pas parfait. Cela peut être considéré comme un jsFiddle bug.

    Je vais illustrer ce jsFiddle bug avec votre correctif en cours et d'un jsFiddle de l'ensemble de votre page HTML qui a été copié et collé à droite dans le panneau HTML. Rien n'a été changé.

    Maintenant, en utilisant des outils de développement Chrome (frapper la touche F12 sur le clavier), vous pouvez ensuite utiliser Inspecter l'Élément pour l'image... une fois montré dans l'Onglet Éléments, vous serez dans la zone à cliquer sur le span balise qui est juste au-dessus.

    Maintenant vient la partie amusante, vous pouvez désactiver le style de la display:inline-block; par la suppression de la coche (par l'intermédiaire de Styles, lorsqu'il est développé dans le panneau de droite) et vous verrez une légère pixel shift en Chrome pour ceux .les images png mais pour être sûr, ils sont encore visibles!

    La ligne du bas: Considérer jsFiddle un excellent outil, mais le Navigateur google Chrome, ou n'importe quel navigateur, devrait être le seul de l'interface lors de l'essai d'une page pour le travail de production. Il devrait avoir le dernier mot, sans un entre la.

    Photo De Référence 1: display:inline-block

    Fond de CSS ne fonctionne pas avec Chrome

    Photo De Référence 2: padding-right: 1px;

    Fond de CSS ne fonctionne pas avec Chrome

    • Merci pour cette explication détaillée. Oui, je me rends compte j'ai besoin de tester avec tous les vrais navigateurs pour la production de code. jsFiddle était seulement un outil pour moi de coller le code et de permettre à quelqu'un d'autre qui a voulu changer à la volée. J'ai été en mesure de confirmer que l'ajout de padding-right:1px; fonctionne aussi, mais je ne suis pas sûr de savoir comment cela résout mon problème d'origine de la <span> élément ne s'affichent pas. Allez-vous donner des précisions?
    • Btw, j'ai voulu "partager" boîte à être un peu plus bas, parce que ces touches sont utilisées pour le partage de l'ensemble du post, et pas seulement les images elles-mêmes. Dans le cadre d'un mouvement de nettoyer le web, ainsi que l'augmentation des problèmes de confidentialité, je n'ai pas de script sociales axées sur les boutons. Mes boutons sont du pur HTML et CSS, avec un peu de jQuery popup. Ils fonctionnent même si le JS est désactivé 🙂
    • Référence commentaire: "jsFiddle était seulement un outil pour moi de coller le code et de permettre à quelqu'un d'autre qui a voulu changer à la volée". Ma réponse est en fait basé sur votre contenu de la Question "dites-moi pourquoi ça marche sur FF, IE9, jsfiddle". Cela dit, il semble que votre page web utilisation des objets flottants right fonctionne différemment dans Chrome lorsqu'il n'est pas bac à sable, d'où l'utilisation de padding-right:1px; réglage.
    • Référence commentaire: "Btw, j'ai voulu "partager" boîte à être un peu plus bas". À l'aide de padding-right:1px; serait la bonne méthode, puis d'autres de la règle CSS pour définir les boutons sociaux inférieur est nécessaire. Maintenant, les boutons sociaux sont à l'visuelle de l'emplacement de quelque chose d'autre qui l'affectent. Cela dit, l'emplacement est correct par votre objectif, mais la méthode sur comment il est arrivé il n'y a pas à mon humble avis.
    • Gotcha. Donc, tout se résume à la façon dont les différents moteurs de rendu différemment, et dans ce cas, Webkit est celui qui n'est pas tolérant, non?
    • J'ai seulement passé du temps avec jsFiddle et Chrome pour découvrir que jsFiddle gérer les choses différemment... et à l'époque c'était le "puis la version actuelle de Firefox et Chrome.

    InformationsquelleAutor arttronics
  3. 1

    Simplement mettre la hauteur de l'image =)

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

    - Je ajouter le même problème avec Chrome, mais ma solution était bizarre

    C'était mon premier code CSS dans le corps wrapper

    background-image: url(../../img/layout/bgOutside-rtl.jpg);

    Mais l'image répétée, ce qui n'était pas ce que je voulais. J'ai essayé les solutions proposées par ailleurs, mais dans la plupart des cas, cela a aggravé les choses.

    J'ai ajouté ce

    background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

    PHPStorm a suggéré que c'était une meilleure alternative

    background: url(../../img/layout/bgOutside-rtl.jpg) no-repeat;

    Ce qui semble logique, mais ça n'a pas fonctionné. Chrome semblait prendre cela comme une instruction de ne pas afficher aucune image.

    La seule façon que j'ai de ce travail était de revenir à

    background-image: url(../../img/layout/bgOutside-rtl.jpg);
background-repeat: no-repeat;

    Aller à la figure. Il a travaillé et tous les navigateurs rendu de la page correctement.

    Encore plus étrange, c'est le fait que cette question na pas de se produire lors de l'écriture du code dans Linux, il ne se produit que lors de l'utilisation de la version Windows de Chrome ...

    InformationsquelleAutor John Perczyk