Html.RadioButtonFor 单选按钮不在 Safari 或 Chrome 中呈现

Posted 2023-03-06

【中文标题】Html.RadioButtonFor 单选按钮不在 Safari 或 Chrome 中呈现

【英文标题】：Html.RadioButtonFor Radio Buttons aren't rendering in Safari nor Chrome

【发布时间】：2014-11-25 13:41:19

【问题描述】：

哎呀！我的单选按钮会在除 Safari 和 Google Chrome 之外的所有浏览器中呈现。

使用 ASP.NET MVC 4，我在我的一个观点中写了这个：

    <!-- model property1 -->
    <div class="form-group col-md-4">
        @html.LabelFor(m => m.property1)
        <div class="form-control">
            @Html.RadioButtonFor(m => m.property1, true)
            @Html.Label("Yes")
            @Html.RadioButtonFor(m => m.property1, false)
            @Html.Label("No")
        </div>
    </div>

但它最终在页面上看起来像这样：

所以我尝试为这两个单选按钮提供唯一 ID，看看它是否解决了问题：

@Html.RadioButtonFor(m => m.property1, true, new @id = "property1_true")
@Html.Label("Yes")
@Html.RadioButtonFor(m => m.property1, false, new @id = "property1_false"))
@Html.Label("No")

它没有。在 Google Chrome 中，HTML 如下所示：

<!-- model property1 -->
<div class="form-group col-md-4">
    <label for="property1">Lorem ipsum dolor sit amet, consectetur adipisicing elit?</label>
    <div class="form-control">
        <input id="property1_true" name="property1" type="radio" value="True" />
        <label for="Yes">Yes</label>
        <input id="property1_false" name="property1" type="radio" value="False" />
        <label for="No">No</label>
    </div>
</div>

我正在运行适用于 Windows 的 Safari 5.1.7 和 Chrome 37.0。

【问题讨论】：

在这些浏览器的控制台中，您是否看到任何错误？你也可以发布那些浏览器呈现的html吗？

@Matt 感谢您的回复。我添加了 Chrome 呈现的 HTML。我相信 Safari 以相同的方式呈现它，但如果需要，我愿意仔细检查。至于控制台错误，我收到与 jQuery-migrate 相关的错误：JQMIGRATE: Logging is active JQMIGRATE: jQuery.event.handle is undocumented and deprecated 等。没有别的了。我不认为这些错误与这个问题有关。

有趣的是标签在那里并且正确但它们不显示。出于好奇，如果您将渲染的代码放入您的视图而不是助手中，它会正确渲染吗？

@Matt 我知道，对吧？但是不，当我将呈现的 HTML 复制并粘贴到我的视图中时，单选按钮仍然不显示。

不幸的是，我现在不知所措。我唯一的建议是尝试消除该错误。过去，当我遇到错误时，我的观点发生了奇怪的事情

【参考方案1】：

经过多次调查，解决方案非常简单。我没有仔细检查 CSS：

input:not([type='checkbox']) 
    -webkit-appearance: none;

所以这不是一个真正的浏览器兼容性问题，也不是编码问题，也不是格式错误的 HTML 问题（等等等等）。