¿Los botones de radio se muestran incorrectamente en IE7 pero están bien en Firefox?

Question

Tengo una configuración de sitio que funciona bien en ie8 y firefox, pero como puede ver aquí:

¿Es este un problema con algunos css o una transparencia png? ¿O es solo algo con IE7.

Gracias de antemano :)

Answer 1

Para cualquiera con un problema similar, la forma de evitar esto era agregar un

background-image: none;

Al CSS para los botones de radio :) Espero que eso ayude.

Answer 2

No estoy seguro de si este es el fenómeno que estás experimentando, pero parece ser así, así que:

Los botones de radio son < input > Etiquetas como cualquier otra. Si tiene una regla CSS que se aplica a todas las etiquetas de entrada, se activarán los botones de opción (y enviarán botones y casillas de verificación, etc.) junto con los campos de texto de entrada. IE es particularmente notorio sobre este, irónicamente.

Lo que tiendo a hacer es usar el siguiente tipo de fragmentos de HTML:

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

Y luego defina mis reglas CSS de esta manera:

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

Si bien eso no utiliza selectores sofisticados como uno podría argumentar que debería hacerlo, lo hace para una excelente compatibilidad con navegadores heredados, especialmente IE6 (que, mientras Windows 2000 todavía esté en uso, probablemente no desaparecerá de Internet demasiado pronto).

Answer 3

Tengo IE 9 y tenía fondos cuadrados blancos en mi asp RadioButtonList que se muestra a continuación:

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

Esto se veía bien en Chrome, FireFox, etc. Esto se resolvió al NO tener un atributo CssClass en el control HTML RadioButtonList, recuerde que esto se representa como una entrada como type = radio, y luego agregar esto a mi hoja de estilo CSS global :

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

¡Eso pareció curar los botones de radio! El texto era O K, pero el pequeño 'botón' tenía un área de 20x20px que era blanca sin importar qué. ¡Eso está bien hasta que el fondo no sea blanco!

¡Espero que eso ayude!