Question

我试图将复选框变为Bootstrap Switch。它在IE中工作正常，但在Chrome中它没有正确设置。出了什么问题？

如果我从网站上简单地下载bootstrap-switch代码，它甚至会发生。在vs 2013中创建一个新的空Web应用程序添加整个内容并在浏览器中点击预览。（examples.html）

在铬的情况下也是如此。

<html lang="en">
<head>
  <link href="content/template/css/bootstrap.min.css" rel="stylesheet">
  <link href="content/template/bootstrap-switch.css" rel="stylesheet">
</head>
<body>
  <input type="checkbox" name="my-checkbox" checked>
  <script src="Scripts/jquery-2.1.1.js"></script>
  <script src="scripts/js/bootstrap-switch.min.js"></script>
  <script>
     $(document).ready(function () {
        $("[name='my-checkbox']").bootstrapSwitch();
     });
  </script>
</body>
</html>

enter image description here

Answer 1

我也有这个问题，运行Chrome 47（最新版本）。我发现我的页面缩放级别设置为90％。设置回100％缩放和页面刷新后，问题已解决。

有趣的是，具有不同缩放级别的切换面板的样式宽度不同。

<span class="bootstrap-switch-handle-off">...
<span class="bootstrap-switch-label">...
<span class="bootstrap-switch-handle-on">...

在90％缩放时（出现问题），每个元素在渲染中的宽度值为32px，其中父容器（class="bootstrap-switch-container"）的最大宽度为93px

在100％缩放时，每个元素的宽度值为31px

Answer 2

我遇到了类似的问题，我的自举开关样式看起来完全错误（切换开关上方的额外空间），结果我的问题是我已经包含了bootstrap-switch css和js文件的错误bootstrap版本。我的Web应用程序使用bootstrap 3.3.7，我不小心使用bootstrap-switch文件作为bootstrap 2，而不是3.只要我交换文件，一切都为我正确设置。

Answer 3

我解决了强制使用初始宽度的问题，只需添加此CSS：

.bootstrap-switch-handle-off {
    width: 42px;
}

Answer 4

我用以下方法解决了问题：

/* To resolve bootstrap switch Chrome compatibility issue */
.bootstrap-switch-container {
    width: 48px;
}

css样式未在适用于引导开关的chrome中正确应用

4 个答案: