Problèmes avec Internet Explorer et l'arrière-plan ne s'affiche pas

Question

J'ai quelques problèmes avec mon fond ne montrant pas pour mes éléments de bouton.

Voici mon code CSS:

button.button-master-lite, a.button-master-lite { 
    background: #92AE41; 
    background: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41)); 

    border: 1px solid #89A73E; 
    border-bottom: 1px solid #92AE41; 

    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 

    -moz-box-shadow: inset 0 1px 0 0 #92AE41; 
-webkit-box-shadow: inset 0 1px 0 0 #92AE41; 
    box-shadow: inset 0 1px 0 0 #92AE41; 

    color: #fff; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
font-size: 11px; 
    font-weight: bold; 
    line-height: 1; 

    padding: 5px 8px 6px 8px; 
    text-align: center; 
    text-shadow: 0 -1px 0 #5D862F; 
    width: auto; 
} 

Et voici mon code HTML:

<a class="button-master-lite" href="#">Order Now</a> 

Avec IE 6 et IE 7 la couleur d'arrière-plan ne montre pas. Cependant, lorsque j'enlève les autres déclarations d'arrière-plan à l'exception du premier, l'arrière-plan montre.

La page HTML sur laquelle ce bouton est activé comporte un certain nombre de divs et de sous-divs avec des flottants et des éléments de style de position, mais je n'arrive pas à déterminer lequel cause le problème. J'ai essayé de mettre le code sur une page complètement vierge avec seulement ma feuille de style et cela a bien fonctionné.

Y a-t-il quelque chose en particulier qui empêcherait l'arrière-plan de s'afficher lorsque j'ai d'autres déclarations d'arrière-plan pour d'autres navigateurs ?! Cela a-t-il quelque chose à voir avec les flotteurs ou d'autres éléments de positionnement?

J'apprécierais un peu d'aide. Merci.

Answer 1

essayer d'utiliser les propriétés de couleur de fond et background-image comme ceci:

button.button-master-lite, a.button-master-lite { 
    background-color: #92AE41; 
    background-image: -moz-linear-gradient(top, #89A73E 0%, #92AE41 100%); 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89A73E), to(#92AE41)); 
    border: 1px solid #89A73E; 
    border-bottom: 1px solid #92AE41; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; -moz-box-shadow: inset 0 1px 0 0 #92AE41; 
    -webkit-box-shadow: inset 0 1px 0 0 #92AE41; 
    box-shadow: inset 0 1px 0 0 #92AE41; 
    color: #fff; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 1; 
    padding: 5px 8px 6px 8px; 
    text-align: center; 
    text-shadow: 0 -1px 0 #5D862F; 
    width: auto; 
} 

Answer 2

Vous réinitialisez l'arrière-plan juste après l'avoir défini. Utilisez background-color pour définir la couleur, puis background-image pour les dégradés CSS3.

Démo: http://codetester.org/2cef201d

Ce site aide beaucoup! http://css3please.com/

Answer 3

Ajouter display:block ou display:inline-block