单选按钮在 IE7 中显示不正确，但在 Firefox 中可以吗？答案

【问题标题】：Radio Buttons display incorrectly in IE7 but ok in Firefox?单选按钮在 IE7 中显示不正确，但在 Firefox 中可以吗？
【发布时间】：2019-05-03 12:05:39
【问题描述】：

我有一个在 ie8 和 firefox 中运行良好的网站设置，但您可以在此处看到：

这是某些 css 或 png 透明度的问题吗？或者这只是 IE7 的问题。

提前致谢:)

【问题讨论】：

让我们看一些代码。单选按钮的背景颜色是什么？
form input[type=radio], form input[type=checkbox] {border: none;} 以上是与页面相关的唯一代码。以下代码没有其他覆盖 css 命令：Tenure Type:
Freehold Leasehold Unknown 希望有帮助吗？
将您的代码复制到 htmlsandbox.com 时没有这个问题。你能提供更多细节吗？您可以使用 IE 开发工具栏并准确发布应用于背景和单选按钮的样式吗？
您能否提供一个指向您正在处理的页面的链接？
我会尝试托管它，以便您查看。它只发生在 IE7 中，这很奇怪，还没有尝试过 IE6 或更早版本。今天早上我会试试 IE 开发者工具栏，然后回来报告。

标签： css internet-explorer-7 transparency radio-button

【解决方案1】：

我不确定这是否是您正在经历的现象，但确实如此强烈，所以：

单选按钮和其他按钮一样是标签。如果您有一个适用于所有输入标签的 CSS 规则，它们将触发单选按钮（以及提交按钮和复选框等）以及输入文本字段。具有讽刺意味的是，IE 在这方面尤其臭名昭著。

我倾向于使用以下 HTML sn-ps：

<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 仍在使用，它很可能不会从互联网太快了）。

【讨论】：

【解决方案2】：

对于有类似问题的任何人，解决此问题的方法是添加一个

background-image: none;

单选按钮的 css :) 希望有帮助。

【讨论】：

【解决方案3】：

我有 IE 9，并且我的 asp 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 等中看起来不错。通过在 RadioButtonList HTML 控件中没有 CssClass 属性解决了这个问题，请记住这是作为 type=radio 的输入呈现，然后将其添加到我的全局 CSS 样式表：

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

这似乎治愈了单选按钮！文字没问题——但小“按钮”有一个大约 20x20 像素的区域，无论如何都是白色的。在背景不是白色之前没关系！

希望对你有帮助！

【讨论】：