输入范围的IE内部滴答

时间:2014-11-28 13:31:24

标签: css internet-explorer input range

从MSDN我找到了这个页面,但这并不是很好的解释。

http://msdn.microsoft.com/de-de/library/windows/apps/hh465789.aspx

如何摆脱IE输入字段范围内的内部刻度。拥有所有IE浏览器会很酷。

enter image description here

::-ms-ticks-before, ::-ms-ticks-after {
    visibility: hidden;
    display: none;
}
::-ms-ticks {
    visibility: hidden;
    display: none;
}
::-ms-ticks-before {
    visibility: hidden;
    display: none;
}

::-ms-ticks-after {
    visibility: hidden;
    display: none;
}

::-ms-fill-upper {
    background-color:#ccc;
    display: none;
}

::-ms-fill-lower {
    background-color: #999;
    border: 0;
}

::-ms-track {
    color: #ccc;
    border: 0;
}

::-ms-tooltip{
    display:none;
}

2 个答案:

答案 0 :(得分:1)

f12>模拟标签,其中documentMode是您的页面呈现....与win7 / IE11上宣传的一样

应该是Edge ...

文件>属性,找出您的页面映射到哪个IE安全区域。内联​​网站点可能正在使用“在兼容性视图中显示Intranet站点”设置...

将x-ua IE = Edge元数添加到您的文档中,以覆盖GPO配置的Intranet区域配置的兼容性视图设置....

例如

< meta http-equiv =“X-UA-Compatible”content =“IE = Edge”/>

答案 1 :(得分:1)

<!DOCTYPE html>
<html>
<head>
    <title> input type=range -ms-ticks-before,after, -ms-track </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>
        #inp1                   { /***(no css style)***/ }
        #inp2::-ms-track        { color:transparent }

        #inp3::-ms-ticks-before { color:red; display:block }
        #inp3::-ms-track        { color:yellow }
        #inp3::-ms-ticks-after  { color:lime; display:block }

        div  { margin-left:2em }
        span { font-family:'Courier New', monospace; white-space:nowrap }
    </style>
</head>
<body>
    <div>
        <br>
        <br>
        <br>
        <input id=inp1 type=range min=0 max=100 step=1 value=50 />
        <br>
        <span>
            #inp1 { no css style }
        </span>
        <br>
        <br>
        <br>
        <input id=inp2 type=range min=0 max=100 step=1 value=50 />
        <br>
        <span>
            #inp2::-ms-track { color:transparent }
        </span>
        <br>
        <br>
        <br>
        <input id=inp3 type=range min=0 max=100 step=1 value=50 />
        <br>
        <span>
            #inp3::-ms-ticks-before { color:red; display:block }<br>
            #inp3::-ms-track        { color:yellow }<br>
            #inp3::-ms-ticks-after  { color:lime; display:block }
        </span>
    </div>
</body>
</html>


https://googledrive.com/host/0B8BLd2qPPV7XMHR3MGVVbFQ4V3M/input-type-range-ms-css.html(演示)