css样式未在适用于引导开关的chrome中正确应用
Raa*_*ood 3 css google-chrome bootstrap-switch
我正试图将一个复选框变成一个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>
我也有这个问题,运行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