JQM翻转开关渲染问题

Question

我在ASP.Net MVC 4移动Web应用程序中的一个视图中使用了JQM翻转开关。当翻盖开关一直向右移动时，它在渲染时显示出不需要的垂直线。见下面的截图：

以下是代码：

    <li data-role="fieldcontain">
        @Html.Label("AutoLogin", New With {.style = "text-align:center;font-weight:bold"})
       <div class="center-wrapper">
        <select name="AutoLogin" id="AutoLogin" data-role="slider" data-mini="true">
          <option value ="false">Off</option>
          <option value ="true">On</option>
        </select>
        </div>
    </li>

为什么会发生这种情况，我该如何预防？

center-wrapper class：

 .center-wrapper{
 text-align: center;
 }
.center-wrapper * {
 margin: 0 auto;
 }

编辑：

我发现这个渲染问题不是由翻转开关居中引起的，而是由于简单地将翻盖开关置于列表项内。如果我将翻转开关缩小到最简单的形式（见下文），如果翻盖开关位于列表项内，我仍然会遇到渲染问题。您应该能够轻松地重现这一点。

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>