Vous ne pouvez pas afficher div dans Firefox ou chrome, mais il affiche dans IE

Question

J'ai travaillé sur un site Web et je n'arrive pas à obtenir un élément de la page pour afficher correctement dans Google Chrome ou Firefox. Il affiche littéralement une seconde (en fonction de la vitesse de connexion) et disparaît juste. Je n'arrive pas à comprendre le problème. Dans Safari et IE cela fonctionne parfaitement (comme prévu). Cela fonctionne aussi quand il est exécuté localement (c.-à-d. Non serveur ou serveur local) sur Chrome et Firefox bien qu'il ne s'agisse que d'une simple page HTML sans aucun script.

C'est le violon que j'ai créé:

JsFiddle

code (HTML):

<div id="adbox"> 
     <div class="wrapper clearfix"> 
      <div class="info"> 
       &nbsp; 
      </div> 
     </div> 
     <div class="highlight"> 
      <h2>This is a test <i>123</i></h2> 
     </div> 
</div> 

CSS:

#adbox { 
    background: #020a13 url(http://reallygoodpie.com/PArcadeMachines/images/bg-adbox.jpg) no-repeat center top; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    background-size: 90%; 
    min-height: 433px; 
    margin: -56px 0 22px; 
/** Needed for IE7 **/ 
*margin: 0; 
*position: relative; 
*top: -56px; 
} 
#adbox .wrapper { 
    width: 940px; 
    padding: 54px 10px 26px; 
} 
#adbox .info { 
    height: 354px; 
    width: 450px; 
    overflow: hidden; 
    padding: 20px; 
    border-radius: 5px; 
} 
#adbox h1 { 
    color: #ffffff; 
    font-size: 48px; 
    font-style: italic; 
    line-height: 50px; 
    margin-bottom: 30px; 
} 
#adbox p { 
    color: #176eb0; 
    font-size: 14px; 
    line-height: 24px; 
} 
#adbox p a { 
    color: #176eb0; 
} 
#adbox div.highlight { 
    background: #171a1a url("http://reallygoodpie.com/PArcadeMachines/images/adbox-bg-heading.jpg) repeat-x left top; 
    min-height: 82px; 
    border-color: #000; 
    color: white; 
    border-style: solid none; 
    border-width: 1px; 
} 
#adbox div.highlight h2 { 
    color: #484b4b; 
    color: white; 
    font-size: 34px; 
    line-height: 82px; 
    width: 940px; 
    margin: 0 auto; 
    padding: 0 10px; 
    text-shadow: -3px 0 3px #121413; 
} 
#adbox div.highlight h2 i { 
    font-weight: normal; 
} 

Toute aide serait grandement appréciée.

Answer 1

Je pense que vous avez installé des extensions AdBlock dans Chrome et Firefox.

Appelez #adbox autre chose.

Answer 2

En fait, vous oubliez de fermer l'image d'arrière-plan url avec guillemet .. vérifier son violon qui travaille maintenant sur les deux Chrome et Firefox .. et sur safari FIDDLE

/** adbox **/ 
#adbox { 
    background: #020a13 url(http://reallygoodpie.com/PArcadeMachines/images/bg-adbox.jpg) no-repeat center top; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    background-size: 90%; 
    min-height: 433px; 
    margin: -56px 0 22px; 
/** Needed for IE7 **/ 
*margin: 0; 
*position: relative; 
*top: -56px; 
} 
#adbox .wrapper { 
    width: 940px; 
    padding: 54px 10px 26px; 
} 
#adbox .info { 
    height: 354px; 
    width: 450px; 
    overflow: hidden; 
    padding: 20px; 
    border-radius: 5px; 
} 
#adbox h1 { 
    color: #ffffff; 
    font-size: 48px; 
    font-style: italic; 
    line-height: 50px; 
    margin-bottom: 30px; 
} 
#adbox p { 
    color: #176eb0; 
    font-size: 14px; 
    line-height: 24px; 
} 
#adbox p a { 
    color: #176eb0; 
} 
#adbox div.highlight { 
    background: #171a1a url("http://reallygoodpie.com/PArcadeMachines/images/adbox-bg-heading.jpg") repeat-x left top; 
    min-height: 82px; 
    border-color: #000; 
    color: white; 
    border-style: solid none; 
    border-width: 1px; 
} 
#adbox div.highlight h2 { 
    color: #484b4b; 
    color: white; 
    font-size: 34px; 
    line-height: 82px; 
    width: 940px; 
    margin: 0 auto; 
    padding: 0 10px; 
    text-shadow: -3px 0 3px #121413; 
} 
#adbox div.highlight h2 i { 
    font-weight: normal; 
} 

Answer 3

adbox div.highlight {

background: #171a1a url("http://reallygoodpie.com/PArcadeMachines/images/adbox-bg-heading.jpg) repeat-x left top; 

une chose est qu'il ya une erreur de faute de frappe ... Après url que vous avez donné « et à la fin de celui-ci il n'y a pas de fin » .... Check it out !!!