2014-11-28 2 views
1

Из MSDN я нашел эту страницу, но это не очень хорошее объяснение.IE внутренние тики входного диапазона

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; 
} 

ответ

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 (демо)

1

f12> вкладка Emulation, которая documentMode ваша страница рендеринга в .... работает как рекламируется на win7/IE11

должен быть край ...

файл > Свойства, чтобы узнать, в какой зоне безопасности IE отображается ваша страница. Интранет-сайты могут использовать настройки «Отображать сайты интрасети в режиме совместимости» ...

добавьте x-ua IE = Edge meta к вашему документу, чтобы перенаправить настроенный объект групповой политики. Конфигурация зоны внутри сети. Параметры представления совместимости ....

например.

< META HTTP-эквив = "X-UA-Compatible" содержание = "IE = Край"/>

+0

Спасибо за подсказку. Это хорошо для будущих проблем. Благодаря! – craphunter

Смежные вопросы