css - 页面缩放时元素 CSS 样式的问题
问题描述
我有一个简单的自定义切换开关 CSS ,目前我的问题是当我将页面(例如使用 Chrome )缩放到 70-80% 时,滑块向左移动了一点,你可以看到滑块左侧的红色背景拇指出现。附上屏幕截图
如何解决这个问题?我希望我的拇指/滑块位置在所有页面的所有缩放级别都保持不变。
例如,如果您使用 chrome(在 25 - 33% 之间缩放)也会发生同样的问题,您会注意到相同的样式问题
页面缩放 70-80% 时出现问题的屏幕截图
.switch-input {
display: none;
}
.switch-label {
position: relative;
display: inline-block;
cursor: pointer;
font-weight: 500;
text-align: left;
}
.switch-label:before, .switch-label:after {
content: "";
position: absolute;
margin: 0;
outline: 0;
top: 50%;
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.switch-label:before {
left: 1px;
width: 34px;
height: 14px;
background-color: red;
border-radius: 10px;
}
.switch-label:after {
left: 0;
width: 20px;
height: 20px;
background-color: #FAFAFA;
border-radius: 50%;
}
<div>
Input: <input type="checkbox" id="id-name--1" name="set-name" class="switch-input" />
<label for="id-name--1" class="switch-label"/>
</div>
解决方案
推荐阅读
- javascript - 拖动 div 时停止重叠
- powershell - 尝试访问URL时出现错误403,可以通过浏览器访问而不会出错
- python - Pandas 合并多个数据框并创建 pivot_table
- python - Python请求不抓取网页的表格元素
- http - 如何使用 netcat 发送不完整的 http 请求?
- snowflake-cloud-data-platform - 我正在尝试在案例中使用 select 语句,但雪花中有很多语法错误
- jenkins - Jenkins 在构建中提取了哪些提交?
- groovy - 如何在不使用 append 关键字的情况下将数据附加到 groovy 中的 csv 文件
- javascript - 如何为计算器功能创建输出框?
- javascript - 在 React 中,简单值状态与对象状态之间的区别