Радио кнопки неправильно отображаются в IE7, но нормально в Firefox?

Question

У меня есть настройка сайта, которая работает нормально в ie8 и firefox, но, как вы можете видеть здесь:

Это проблема с прозрачностью CSS или PNG? Или это просто что-то с IE7.

Заранее спасибо:)

Answer 1

Для тех, у кого похожая проблема, можно было обойтись путем добавления

background-image: none;

К css для радио-кнопок :) Надеюсь, что это помогает.

Answer 2

Я не уверен, что это тот феномен, который вы испытываете, но это действительно так выглядит, поэтому:

Радиокнопки: < input > метки как и любые другие. Если у вас есть правило CSS, которое применяется ко всем тегам ввода, они будут срабатывать для радиокнопок (и отправлять кнопки и флажки и т. Д.) Вместе с полями ввода текста. По иронии судьбы в IE это особенно печально известно.

Я обычно использую следующие типы фрагментов HTML:

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

А затем определите мои правила CSS следующим образом:

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

Хотя в нем не используются причудливые селекторы, как можно было бы возразить, это обеспечивает превосходную совместимость с устаревшими браузерами, особенно с IE6 (который, пока Windows 2000 все еще используется, вероятно, не исчезнет из в интернете все слишком рано).

Answer 3

У меня IE 9 и фон белого квадрата на моем RadioButtonList, показанном ниже:

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

Это хорошо выглядело в Chrome, FireFox и т. д. Это было решено, если НЕ иметь атрибута CssClass в HTML-элементе управления RadioButtonList, помните, что он отображается как вход как type = radio, а затем добавлен в мою глобальную таблицу стилей CSS

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

Это, казалось, заживало радио кнопки! Текст был ОК, но маленькая «кнопка» имела область размером 20x20 пикселей, которая была белой, несмотря ни на что. Это нормально, пока фон не станет чем-то отличным от белого!

Надеюсь, это поможет!