Les boutons radio ne s'affichent pas correctement dans IE7 mais fonctionnent correctement dans Firefox?

Question

J'ai une configuration de site qui fonctionne bien dans ie8 et Firefox mais comme vous pouvez le voir ici:

Est-ce un problème avec une transparence css ou png? Ou est-ce juste quelque chose avec IE7.

Merci d'avance :)

Answer 1

Pour quiconque ayant un problème similaire, la solution consistait à ajouter un

background-image: none;

Pour le css des boutons radio :) J'espère que cela vous aidera.

Answer 2

Je ne suis pas sûr que ce soit le phénomène que vous rencontrez, mais il semble fortement que ce soit le cas, donc:

Les boutons radio sont < entrée > balises comme les autres. Si vous avez une règle CSS qui s'applique à toutes les balises d'entrée, elles se déclencheront pour les boutons radio (et les boutons et cases à cocher de soumission, etc.) avec les champs de texte de saisie. Ironiquement, IE est particulièrement notoire à propos de celui-ci.

J'ai tendance à utiliser les extraits de code HTML suivants:

<input type="radio" class="radio" ... />

Et ensuite, définissez mes règles CSS comme ceci:

input {
  // stuff for most input fields goes here, e.g.
  background-image:url(fancy.png);
}
input.radio {
  // reverting the rules I don't want applied, e.g.
  background-image:none;
}

Bien que cela n'utilise pas de sélecteurs sophistiqués comme on pourrait le penser, cela garantit une excellente compatibilité avec les anciens navigateurs, en particulier IE6 (qui, tant que Windows 2000 est toujours utilisé, ne disparaîtra probablement pas de Internet trop tôt).

Answer 3

J'ai IE 9 et des fonds carrés blancs sur mon asp RadioButtonList illustré ci-dessous:

<asp:RadioButtonList ID="RadioListSearchScope" runat="server" TextAlign="Right" >
<asp:ListItem Text="Include Thread & Inquiry Keywords" selected="true" Value="0"></asp:ListItem>
<asp:ListItem Text="Include Thread & Inquiry Title Text" Value="1"></asp:ListItem>
<asp:ListItem Text="Include Inquiry & Response Body Text" Value="2"></asp:ListItem>
<asp:ListItem Text="Search All the Above" Value="3"></asp:ListItem>

Cela avait l'air bien dans Chrome, FireFox, etc. Cela a été résolu en n'ayant PAS d'attribut CssClass dans le contrôle HTML de RadioButtonList. Souvenez-vous que cela est rendu en tant qu'entrée en tant que type = radio, puis en l'ajoutant à ma feuille de style CSS globale. :

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }
    input[type="radio"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

Cela semblait guérir les boutons radio! Le texte était O K - mais le petit "bouton" avait environ 20x20 pixels qui était blanc quoi qu'il en soit. C'est bien jusqu'à ce que l'arrière-plan soit autre chose que du blanc!

J'espère que cela aide!