PNG image d'arrière-plan apparaît pas dans IE 8< à l'aide de html5?

J'ai le code html suivant:

<section class="first-content-top">
    <img src="images/img-diner.png" />
    <h1>Menu</h1>
</section>
<section class="first-content-middle">
         <article class="menu">
     </article>
</section>
<section class="first-content-bottom"></section>

Avec le type suivant de css:

.first-content-middle 
{
    background: url("images/bg-black.png") repeat;
    margin: 0 0 0 37px;
    padding: 0 20px;
    width: 595px;
}

Mais dans IE8 je ne peux toujours pas voir une image d'arrière-plan, telles que je les vois dans IE9 ou firefox:

Voici une photo de IE8:

PNG image d'arrière-plan apparaît pas dans IE 8< à l'aide de html5?

Et voici une photo de firefox, comment il devrait être:

PNG image d'arrière-plan apparaît pas dans IE 8< à l'aide de html5?

J'ai essayé les solutions suivantes:

Pour éviter le problème que j'ai ajouté ce qui suit html5shiv code à la tête de la page:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Et dans firebug j'ai vérifié pour s'assurer que la section de l'élément a de la display:block; ensemble de propriétés.

Edit: Ajout de la height propriété css à la section résout le problème de fond. Mais la hauteur de la section est variable. Alors, comment puis-je résoudre ce problème?

Des suggestions?

peut-on le vérifier sur tout testserver ou jsfiddle ?
Remarque: ici, c'est un test donc OK quelle que soit, mais une fois en production, html5shiv doivent être ajoutés si IE lte 8 ou IE lt 9, pas sur IE9 et 10, où c'est inutile.
ok, merci pour l'astuce.
Je serais ravi de vous aider à résoudre ce problème, mais vraiment, je ne pense pas avoir assez d'informations. Soit un exemple du problème dans un jsfiddle ou plus de code est nécessaire, il pourrait bien y avoir une interaction de code à l'origine du problème. Si vous ne pouvez pas poster de violon de la question, puis vous pouvez poster toutes les css pour les trois différents section éléments le long avec des exemples de code html/css de la article élément? Cela peut l'aider à traquer la solution.
Elle montre très bien pour moi dans IE8 mode sur Win 7, donc soit tu le fixe, ou c'est spécifique à certains autres facteurs (système d'exploitation, etc.). Je suppose que je ne vais pas être d'une aide quelconque.

OriginalL'auteur RTB | 2012-08-30

  1. 8

    Votre png image d'arrière-plan doit être au moins de 4x4px.

    Ce lien est rompu - ce qui semble être une bonne solution: dillerdesign.com/experiment/DD_belatedPNG
    J'ai enlevé le lien, merci.

    OriginalL'auteur Memet Olsen

  2. 1

    .d'abord-contenu-moyen
    {
    background: url("images/bg-noir.png") repeat scroll 0 0;
    margin: 0 0 0 37px;
    padding: 0 20px;
    largeur: 595px;
    }

    supprimer la transparence de l'arrière-plan

    je suis désolé, ça ne dit pas vraiment transparent. C'est firebug code. Je vais changer ma réponse à la droite code source css.

    OriginalL'auteur supersaiyan

  3. 0

    Ce pourrait être liée à votre problème. Généralement IE9 et ci-dessous n'aime pas la transparence, l'opacité.

    Surplus dans ie7 et ie8 intead de Transparence lors de l'utilisation PNG transparent et l'opacité

    Ce code ne fonctionne que sur les éléments img et non pas les images de fond. Ce qui est exactement le problème. Toutes les suggestions pour qui?

    OriginalL'auteur xivo

  4. 0

    IE7 et IE8 natif PNG soutien pour l'alpha-transparents, mais il tombe en morceaux, dès que l'opacité entre dans l'image. Lors du réglage de la valeur de l'opacité, même à 100% (c'est à dire. filter: alpha(opacity = 100)), c'est à dire comble de l'alpha-transparence des PNG avec un noir pur remplissage. Cela est parfois appelé une "black halo". L'alpha filtre peut être retiré à tout moment de retirer le remplir et de restaurer la transparence alpha, mais en soutenant à la fois nécessite l'utilisation de plus de IE propriatary filtres. Tous les exemples de suivi devrait être placé dans un IE-targete

    /* Normal CSS background using an PNG with an alpha transparency */
#demo {
background:url(ie8-logo.png) 0 0 no-repeat;
}
    Il n'y a pas de css opacité. C'est déjà dans l'image de fond qui est à l'origine du problème.

    OriginalL'auteur Sathish

  5. 0

    vous devez définir la section display:block dans votre CSS

    Avec IE, même avec le shiv, vous devez déclarer le HTML 5 éléments
    comme les éléments de bloc. J'utilise cette ligne pour Internet Explorer, mais vous pouvez
    modifier des éléments dont vous avez besoin.

    header,nav,article,footer,section,aside,figure,figcaption{display:block}

    De la Modernizr de la Documentation: "vous aurez également probablement souhaitez définir
    beaucoup de ces éléments à display:block;"

    de C'est à dire pas de style balises HTML5 (avec shiv)

    Encore doenst travail, désolé. Voici un lien pour le développeur de l'environnement: dev.webrtb.com/zinn/cafe

    OriginalL'auteur msEmmaMays