I pulsanti di opzione vengono visualizzati in modo errato in IE7 ma vanno bene in Firefox?

Question

Ho una configurazione del sito che funziona bene in IE8 e Firefox ma come puoi vedere qui:

È un problema con qualche trasparenza CSS o PNG?O è solo qualcosa con IE7.

Grazie in anticipo :)

Answer 1

Per chiunque abbia un problema simile, il modo per aggirare questo è stato aggiungere un

background-image: none;

Al CSS per i pulsanti di opzione :) Spero che sia d'aiuto.

Answer 2

Non sono sicuro che questo sia il fenomeno che stai riscontrando, ma sembra fortemente così, quindi:

I pulsanti di opzione sono tag <input> come tutti gli altri.Se hai una regola CSS che si applica a tutti i tag di input, si attiveranno per i pulsanti di opzione (e invieranno pulsanti e caselle di controllo, eccetera) insieme ai campi di testo di input.IE è particolarmente noto per questo, ironicamente.

Quello che tendo a fare è utilizzare il seguente tipo di snippet HTML:

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

E poi definisci le mie regole CSS in questo modo:

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;
}

Sebbene ciò non utilizzi selettori fantasiosi come si potrebbe sostenere che si dovrebbero fare, garantisce un'eccellente compatibilità con i browser legacy, in particolare IE6 (che, finché Windows 2000 sarà ancora in uso, probabilmente non scomparirà da Internet tutto troppo presto).

Answer 3

Ho IE 9 e avevo sfondi quadrati bianchi sul mio ASP RadioButtonList mostrato di seguito:

<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>

Sembrava perfetto in Chrome, FireFox ecc. Ciò è stato risolto NON avendo un attributo CssClass nel controllo HTML RadioButtonList, ricorda che questo è reso come input come type = radio, e quindi aggiungendolo al mio foglio di stile CSS globale :

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

Sembrava curare i pulsanti di opzione! Il testo era O K - ma il piccolo 'pulsante' aveva un'area di 20x20 px che era bianca, non importa quale. Va bene fino a quando lo sfondo è qualcosa di diverso dal bianco!

Spero che sia d'aiuto!