jquery-mobile - jQuery Mobile 输入复选框在 IE10 中显示双倍

Question

使用 jQuery Mobile 1.3。这是我的 ASP.Net MVC 页面中的 Rayzor 代码。

<li data-role="fieldcontain">
    @Html.LabelFor(m => m.RememberMe, new { data_theme = "a" })
    @Html.CheckBoxFor(m => m.RememberMe, new { data_theme = "a" })
</li>

生成的 HTML 在 Chrome 中呈现如下，在 IE10 中看起来也一样:

到目前为止一切顺利。现在，当我在此复选框内单击时，或者当我切换到控件并按空格键时，IE 开始失败。 IE 会在已有复选框的上方显示另一个复选框。

不对!快速查看两个浏览器的 F12 屏幕确实表明该复选框存在于 HTML 中。此处在 Chrome 中突出显示:

用 CSS 隐藏它是正确的解决方案吗？如果是这样，我想这是一个 jQuery 错误。我不明白为什么 IE 显示这个而 Chrome 没有。在 Chrome 中，显示设置为阻塞，zindex 设置为 1。所以我希望它也能在 Chrome 中显示。显然我不想这样；在这种情况下，IE 似乎是正确的，即使我想要 Chrome 的行为。

Answer 1

检查填充复选框的代码。

JQM 的复选框在标签顶部有此输入。像这样...

<div class="ui-checkbox">
    <input type="checkbox" name="checkbox-2a" id="checkbox-2a">
    <label for="checkbox-2a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-on" data-theme="c" data-mini="false" class="ui-checkbox-on ui-btn ui-btn-hover-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c">
        <span class="ui-btn-inner">
            <span class="ui-btn-text">Doritos</span>
            <span class="ui-icon ui-icon-checkbox-on ui-icon-shadow">&nbsp;</span>
        </span>
    </label>
</div>