Радио кнопки неправильно отображаются в IE7, но нормально в Firefox?
-
05-07-2019 - |
Решение 2
Для тех, у кого похожая проблема, можно было обойтись путем добавления
background-image: none;
К css для радио-кнопок :) Надеюсь, что это помогает.
Другие советы
Я не уверен, что это тот феномен, который вы испытываете, но это действительно так выглядит, поэтому:
Радиокнопки: < 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 все еще используется, вероятно, не исчезнет из в интернете все слишком рано).
У меня 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 пикселей, которая была белой, несмотря ни на что. Это нормально, пока фон не станет чем-то отличным от белого!
Надеюсь, это поможет!