logo标签列表

Chrome浏览器中Bootstrap开关的CSS样式未正确应用

cssgoogle-chromebootstrap-switch
4
我正在尝试将复选框转换成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>

enter image description here

使用您的代码，我无法重现问题。您确定CSS和JS文件的路径正确吗？在Chrome中具体出了什么问题？ - showdev
只有在Chrome浏览器中出现错误。 - Raas Masood
我已经在问题中添加了图片。即使我从网站上简单地下载bootstrap-switch代码，这种情况仍然会发生。创建一个新的空Web应用程序，添加整个内容并在浏览器中预览。在Chrome的情况下也是同样的结果。 - Raas Masood
你尝试从 Switch 网站下载代码了吗？我的 Chrome 已经更新了。 - Raas Masood
只有在通过VS（浏览器选项中的查看）运行时才会出现这种情况，否则打开它就没问题。 - Raas Masood
显示剩余2条评论
4个回答
6

我也遇到了这个问题，使用的是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

1
有没有办法解决这个问题。我的应用程序现在已经投入生产，我想无论如何都要解决这个问题。 - Jenish Zinzuvadiya
我不理解这个答案，有什么解决方案吗？ - Nathan B
0

我解决了这个问题，强制使用初始宽度，只需添加以下CSS：

.bootstrap-switch-handle-off {
    width: 42px;
}
0
我遇到了一个类似的问题，我的Bootstrap开关样式看起来完全不对（在切换开关上方有额外的空间），结果发现我的问题是我包含了错误版本的bootstrap-switch css和js文件。我的Web应用程序使用的是Bootstrap 3.3.7，而我错误地使用了Bootstrap 2的bootstrap-switch文件。当我交换文件后，一切都正确地进行了样式化。
-1

我解决了这个问题：

/* To resolve bootstrap switch Chrome compatibility issue */
.bootstrap-switch-container {
    width: 48px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接