css 样式在 chrome 中未正确应用 bootstrap 开关

Question

我正在尝试将复选框变成 Bootstrap Switch。它在 IE 中运行良好，但在 Chrome 中样式不正确。怎么了？

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

与 chrome 的情况相同。

<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>

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

我解决了这个问题：

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

Answer 3

我运行遇到了类似的问题，我的 bootstrap 开关样式看起来完全错误（切换开关上方的额外 space），结果我的问题是我已经包含了bootstrap-开关 css 和 错误 bootstrap 版本 的 js 文件。我的 Web 应用程序使用 bootstrap 3.3.7，我不小心将 bootstrap-switch 文件用于 bootstrap 2，而不是 3。一旦我交换文件，所有样式都正确我.

Answer 4

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

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

css 样式在 chrome 中未正确应用 bootstrap 开关

css style does not applied properly in chrome for bootstrap switch

css

google-chrome

bootstrap-switch