:: - ms-thumb出现在曲目后面 [英] ::-ms-thumb appears behind track

问题描述

我为一些滑块创建了一个自定义类。铬一切工作正常。请参阅下面的图片：

Chrome

我的问题，虽然是在Internet Explorer我得到这个：

现在这里是我的css：

  input [type =range]。 slider-black ::  -  ms-thumb {
 height：40px; 
 width：40px; 
 border-radius：100px; 
 background：rgba（0,0,0,0.7）; 
 border：2px纯银; 
 box-shadow：0 0 4px 2px rgba（1,1,1,0.8）; 
 
} 
 
 
 
 input [type =range]。slider-black ::  -  webkit-slider-thumb {
高度：40像素; 
 width：40px; 
 border-radius：100px; 
 background：rgba（0,0,0,0.7）; 
 border：2px纯银; 
 box-shadow：0 0 4px 2px rgba（1,1,1,0.8）; 
 
 
 
 
 
 
 $ b 
有没有办法做我的::  -  ms-拇指看上去和chrome上的一模一样吗？
       //0B8BLd2qPPV7XMHR3MGVVbFQ4V3M/thumb-demo-shot.png> 
 
技巧是在::  -  ms-track中应用一个宽度为拇指按钮宽度一半的边距。
这里有一个在线演示 
 
I have created a custom class for some sliders.In chrome everything is working fine.See image below:

Chrome



My problem though is that on internet explorer i get this:


Now here is my css:
input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);

}



    input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);

}
Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?
解决方案


The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.

here's an online demo

                        
这篇关于::  -  ms-thumb出现在曲目后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！