Как написать CSS хак для IE 11?
Как я могу взломать или написать CSS только для IE 11? У меня есть веб-сайт, который выглядит плохо в IE 11. Я просто ищу здесь и там, но пока не нашел решения.
Есть ли селектор CSS?
8 ответов
Используйте комбинацию определенных CSS-правил Microsoft для фильтрации IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Подобные фильтры работают из-за следующего:
Когда пользовательский агент не может проанализировать селектор (т. Е. Он не является допустимым CSS 2.1), он должен игнорировать селектор и следующий блок объявления (если таковой имеется).
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>Рекомендации
В свете развивающейся темы я обновил ниже:
IE 6
* html .foo {property:value;}
или же
.foo { _property:value;}
IE 7
*+html .foo {property:value;}
или же
*:first-child+html .foo {property:value;}
IE 6 и 7
@media screen\9 {
.foo {property:value;}
}
или же
.foo { *property:value;}
или же
.foo { #property:value;}
IE 6, 7 и 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 8
html>/**/body .foo {property:value;}
или же
@media \0screen {
.foo {property:value;}
}
IE 8 только в стандартном режиме
.foo { property /*\**/: value\9 }
IE 8,9 и 10
@media screen\0 {
.foo {property:value;}
}
Только IE 9
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 9 и выше
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 и 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
Только IE 10
_:-ms-lang(x), .foo { property:value\9; }
IE 10 и выше
_:-ms-lang(x), .foo { property:value; }
или же
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
..foo{property:value;}
}
IE 11 (и выше..)
_:-ms-fullscreen, :root .foo { property:value; }
Javascript альтернативы
Modernizr
Modernizr быстро запускает загрузку страницы для обнаружения функций; затем он создает объект JavaScript с результатами и добавляет классы в элемент html
Выбор агента пользователя
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Добавляет (например) ниже к html элемент:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Разрешить очень целенаправленные CSS-селекторы, например:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
сноска
Если возможно, выявляйте и устраняйте любые проблемы без взлома. Поддержка прогрессивного улучшения и постепенной деградации. Тем не менее, это сценарий "идеального мира", который не всегда доступен, поэтому вышеизложенное должно помочь предложить некоторые хорошие варианты.
Атрибуция / Основное чтение
Вот двухэтапное решение, вот взлом на IE10 и 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
поскольку IE10 и IE11 поддерживают -ms-high-cotrast, вы можете воспользоваться этим, чтобы настроить таргетинг на эти два браузера
и если вы хотите исключить IE10 из этого, вы должны создать специальный код IE10, следуя которому он использует трюк агента пользователя, вы должны добавить этот Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
и этот тег HTML
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
и теперь вы можете написать свой код CSS, как это
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
для получения дополнительной информации, пожалуйста, обратитесь к этим сайтам, Крис Туториал
И если вы хотите использовать IE11 и более поздние версии, вот что я нашел:
_:-ms-fullscreen, :root .selector {}
Вот отличный ресурс для получения дополнительной информации: browserhacks.com
Я пишу их и добавляю на BrowserHacks.com с осени 2013 года - этот, который я написал, очень прост и поддерживается только в IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
и конечно же див...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Таким образом, текст отображается в синем с Internet Explorer 11. Удачи с этим.
-
Больше IE и других браузерных CSS хаков на моем живом тестовом сайте здесь:
ОБНОВЛЕНО: http://browserstrangeness.bitbucket.io/css_hacks.html
ЗЕРКАЛО: http://browserstrangeness.github.io/css_hacks.html
(Если вы также ищете MS Edge CSS Hacks, это то, что нужно.)
Вы можете использовать следующий код внутри тега style:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Ниже приведен пример, который работал для меня:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Обратите внимание, что поскольку (#nav li) и (#nav a) находятся за пределами экрана @media..., они являются общими стилями.
Так что в конце концов я нашел свое решение этой проблемы.
После поиска в документации Microsoft мне удалось найти новый стиль только для IE11 msTextCombineHorizontal
В моем тесте я проверяю стили IE10 и, если они имеют положительное совпадение, то я проверяю только стиль IE11. Если я найду его, то это IE11+, если нет, то это IE10.
Пример кода: определение IE10 и IE11 с помощью тестирования возможностей CSS (JSFiddle)
Я обновлю пример кода с большим количеством стилей, когда я их обнаружу.
ПРИМЕЧАНИЕ. Это почти наверняка идентифицирует IE12 и IE13 как "IE11", так как эти стили, вероятно, будут продвигаться вперед. По мере появления новых версий я буду добавлять дополнительные тесты, и, надеюсь, снова смогу положиться на Modernizr.
Я использую этот тест для резервного поведения. Резервное поведение - просто менее гламурный стиль, у него нет ограниченной функциональности.
Вы можете использовать js и добавить класс в html, чтобы поддерживать стандарт условных комментариев:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Или используйте lib как bowser:
Или модернизр для обнаружения функций:
Я нашел это полезным
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Добавьте это под своим <head> документ