jquery - Chrome 中 jQuery 滑块中的 1px 故障
问题描述
我正在使用 jQuery UI 中的滑块,其中每个刻度线的宽度为 1px。
这是它在 Firefox 和 Safari 中的外观:
这是正确的。
但这就是它在 Chrome 中的样子:
这是 Chrome 独有的奇怪故障。我已经尝试过box-sizing
并且box-shadow
在查看了类似的问题之后,但我没有成功地使这些标记看起来正确。
如果我将其设置为 2px:
所有的标记都显示出来了,但它仍然有故障。
如果需要代码:
HTML:
<div id="slider"></div>
JS:
function createSlider() {
$("#slider").slider({
min: 1,
max: numOfPages * 3,
step: 1,
range: false,
orientation: 'horizontal',
create: function(event, ui) {
setSliderTicks(event.target);
}
});
}
function setSliderTicks(){
var $slider = $('#slider');
var max = $slider.slider("option", "max");
var spacing = 100 / (max - 1);
console.log('Spacing: ' + spacing);
$slider.find('.tickmark').remove();
for (var i = 0; i < max ; i++) {
$('<span class="tickmark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
}
}
CSS:
#slider {
width: ;
margin: 0 auto;
}
.ui-slider-horizontal {
height: 3px;
width: 75%;
}
.ui-slider {
border: 0;
background-color: #ededed;
border-radius: 6px;
top: 50%;
}
.ui-slider-handle {
width: 19px;
height: 18px;
background-color: #ededed;
border-radius: 50%;
border: none;
cursor: pointer;
top: 50%;
margin-top: -4px;
}
.ui-slider-handle:hover {
opacity: 0.8;
}
.tickmark {
display:inline-block;
width: 1px;
background-color: #ededed;
height: 12px;
position:absolute;
top: -150%;
}
滑块来自https://code.jquery.com/ui/1.12.1/jquery-ui.min.js和https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/ jquery-ui.css
解决方案
推荐阅读
- python - 使用 python 从 Hive 下载区块链数据
- java - 用 IOException 包装非 IOExceptions
- reactjs - 在 RN 应用程序的手机中制作单独的应用程序文件夹
- python - Flask-WTF 实例化嵌套表单
- c++ - 如何在 C++ 中使用 Maya-MEL 命令“选择”
- python - kivy 模块安装失败,如何解决?
- visual-studio-code - 有没有办法在 VS Code 中禁用“剪辑”?
- python - 如何遍历搜索结果的所有页面,为每个搜索结果选择 href,使用 python 和 selenium 抓取数据
- html - 将 div 与屏幕高度中的图像匹配
- reactjs - 多组件多用查询 Apollo 客户端