Существуют ли определенные CSS-селекторы для IE10? - PullRequest
Новая
       23

Существуют ли определенные CSS-селекторы для IE10?

19 голосов
/ 06 сентября 2011

Поскольку в версии 10 IE избавляется от условных комментариев, мне крайне необходимо найти «CSS-хак», специально предназначенный для IE10. Обратите внимание, что это должен быть «взломанный» селектор , а не CSS-свойства.

В Mozilla вы можете использовать: 

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

Находясь в Webkit, вы обычно делаете: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: blue;
  }
}

Как бы я сделал нечто подобное в IE10?

Ответы [ 4 ]

33 голосов
/ 06 ноября 2012

В следующем примере показано, как это сделать 

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

Предупреждение : возможно, будет работать и в IE11 +.

5 голосов
/ 14 декабря 2012

С помощью селектора браузера css из http://rafael.adm.br/css_browser_selector/ вы можете добавить простой + к коду и вызвать IE10 из вашего CSS.

Найдите /msie\s(\d)/ и измените его на /msie\s(\d+)/.

Теперь в вашем CSS просто добавьте .ie10 перед вашим селектором так:

.ie10 .class-name { width: 100px; }
.class-name { width: 90px; }

Теперь вы должны увидеть, как IE10 отображает ширину 100px, а все другие браузеры отображают ширину 90px.

3 голосов
/ 06 сентября 2011

Насколько я знаю, такого селектора CSS не существует. Если вы хотите нацелиться на IE10, почему бы просто не написать немного javascript, чтобы установить класс для элемента body с именем ie10, а затем создать специальные стили для IE10?

2 голосов
/ 13 марта 2012

Я не уверен, соответствует ли это вашему селектору и требованиям к свойствам, но я придумал следующий метод, пытаясь подделать text-shadow в IE7-9 и затем отключить взлом в IE10.Ключ в том, чтобы использовать новые вещи -ms-animation в IE10. 

.header {
    /* For browsers that support it to add a little more punch to a @font-face */
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px;

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */
    *font-weight: bold;
    font-weight: bold\9;
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75\9;

    /* Uh oh! We've also caught IE10 in our above hack */

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */
    -ms-animation: text-shadow 60s infinite;
}

/* Define the animation */
@-ms-keyframes text-shadow {
    0%, 100% {
        font-weight: normal;
        opacity: 1;
    }
}
...