Radio Buttons Anzeige falsch in IE7, aber ok in Firefox?

Question

Ich habe ein Website-Setup, das in IE8 und Firefox funktioniert gut, aber wie Sie sehen können hier:

Ist das ein Problem mit einigen CSS oder PNG-Transparenz? Oder ist dies nur etwas mit IE7.

Vielen Dank im Voraus:)

Answer 1

Für jeden mit einem ähnlichen Problem, die Art und Weise, um dies war ein hinzuzufügen

background-image: none;

Um die CSS für die Radio-Buttons :) Ich hoffe, das hilft.

Answer 2

Ich bin mir nicht sicher, ob dies die phenomenom Sie erleben, aber es ist stark auf diese Weise scheint, so:

Radio-Tasten sind -Tags wie jedes andere. Wenn Sie eine CSS-Regel, die für alle Eingangs Tags gilt, werden sie für Radio-Buttons Feuer (und Submit-Buttons und Checkboxen, etc.) direkt zusammen mit Eingabetextfelder. IE ist besonders berüchtigt über diese, ironisch.

Was ich neige dazu, zu tun, ist die folgende Art von HTML-Snippets zu verwenden:

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

Und dann meine CSS-Regeln wie folgt definiert werden:

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

Während das keine Lust Wähler nicht nutzen wie man man sollte argumentieren könnte, ist es für eine exzellente Kompatibilität mit Legacy-Browsern, vor allem IE6 (die, solange Windows 2000 noch in Gebrauch ist, wird wahrscheinlich nicht verschwinden aus das Internet viel zu früh).

Answer 3

Ich habe IE 9 und weißen Quadrat Hintergründe auf meiner asp Radiobuttonlist hatten mich hier:

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

Das sah gut aus in Chrome, FireFox, etc. Dies wird durch ein NICHT CssClass Attribut in dem Radiobuttonlist-HTML-Steuerelement mit aufgelöst wurde, erinnern diese als Eingang als type = Radio gemacht werden, und dann, diese zu meinem globalen CSS-Stylesheet :

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

Das schien die Radio-Buttons, um zu heilen! Der Text war O K - aber die kleine ‚Taste‘ hatte über ein 20x20px Gebiet, das weiß egal war, was. Das ist in Ordnung, bis der Hintergrund etwas anderes als weiß ist!

Ich hoffe, das hilft!