单选按钮在 IE7 中显示不正确，但在 Firefox 中显示正常？

Question

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

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

提前致谢 ：）

Answer 1

我不确定这是否是您遇到的现象，但看起来确实如此，因此：

单选按钮是 与其他标签一样。如果您有适用于所有输入标记的 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 2

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

background-image: none;

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

Answer 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 像素的区域，无论如何都是白色的。这很好，直到背景不是白色为止！

我希望这有帮助！