Jak napisać CSS hack dla IE 11? [duplikat]
To pytanie ma już odpowiedź tutaj:
Jak mogę zhakować lub napisać css tylko dla IE 11? Mam stronę, która źle wygląda w IE 11.Po prostu szukam tu i tam, ale nie znalazłem jeszcze żadnego rozwiązania.
Czy Jest jakiś selektor css?
8 answers
Użyj kombinacji specyficznych dla Microsoft reguł CSS do filtrowania 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>
Filtry takie jak ta działają ze względu na:
Gdy agent użytkownika nie może przetworzyć selektora (tzn. nie jest poprawny CSS 2.1), musi zignorować Selektor i poniższy blok deklaracji (jeśli istnieje).
<!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>
Referencje
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 21:29:31
W świetle rozwijającego się wątku zaktualizowałem poniżej:]}
IE 6
* html .foo {property:value;}
Lub
.foo { _property:value;}
IE 7
*+html .foo {property:value;}
Lub
*:first-child+html .foo {property:value;}
IE 6 i 7
@media screen\9 {
.foo {property:value;}
}
Lub
.foo { *property:value;}
Lub
.foo { #property:value;}
IE 6, 7 i 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 8
html>/**/body .foo {property:value;}
Lub
@media \0screen {
.foo {property:value;}
}
Tylko tryb standardów IE 8
.foo { property /*\**/: value\9 }
IE 8,9 i 10
@media screen\0 {
.foo {property:value;}
}
TYLKO IE 9
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 9 i wyżej
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 i 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
TYLKO IE 10
_:-ms-lang(x), .foo { property:value\9; }
IE 10 i wyżej
_:-ms-lang(x), .foo { property:value; }
Lub
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
..foo{property:value;}
}
IE 11 (i wyżej..)
_:-ms-fullscreen, :root .foo { property:value; }
Javascript alternatives
Modernizr
Modernizr działa szybko przy ładowaniu strony w celu wykrycia funkcji; wtedy tworzy obiekt JavaScript z wynikami i dodaje klasy do element html
Agent użytkownika wybór
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':'');
Dodaje (np.) poniższy element do 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'
Pozwala na bardzo ukierunkowane selektory CSS, np.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Przypis
Jeśli to możliwe, zidentyfikuj i napraw wszelkie problemy bez hacków. Wsparcie progressive enhancement oraz graceful degradation. Jest to jednak scenariusz "świata idealnego" nie zawsze możliwy do osiągnięcia, jako taki - powyższy powinien pomóc w dostarczeniu dobrego opcje.
Atrybucja / Niezbędna Lektura
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-21 19:19:03
Oto rozwiązanie dwuetapowe oto hack do IE10 i 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Ponieważ IE10 i IE11 obsługuje-ms-high-cotrast, możesz skorzystać z tego, aby kierować te dwie przeglądarki
I jeśli chcesz wykluczyć IE10 z tego musisz utworzyć kod IE10, jak następuje to za pomocą sztuczki agenta użytkownika musisz dodać ten Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
I ten znacznik HTML
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
A teraz możesz napisać swój kod CSS w ten sposób
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
Więcej informacje można znaleźć na tej stronie, wil tutorail, Chris Tutorial
A jeśli chcesz celować w IE11 i Później, oto co znalazłem:
_:-ms-fullscreen, :root .selector {}
Oto świetny zasób, aby uzyskać więcej informacji: browserhacks.com
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-08 02:56:56
Pisałem je i przyczyniłem się do BrowserHacks.com od jesieni 2013-ten, który napisałem jest bardzo prosty i obsługiwany tylko przez IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
I oczywiście div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Więc tekst pokazuje się na niebiesko w internet explorer 11. Baw się dobrze.
-
Więcej IE i innych hacków CSS przeglądarki na mojej stronie testowej na żywo tutaj:
Aktualizacja: http://browserstrangeness.bitbucket.io/css_hacks.html
Lustro: http://browserstrangeness.github.io/css_hacks.html
(Jeśli szukasz również MS Edge CSS Hacki, to gdzie się udać.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-04 13:31:04
Możesz użyć następującego kodu wewnątrz znacznika style:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Poniżej przykład, który zadziałał dla mnie:
<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>
Należy pamiętać, że ponieważ (#NAV li) i (#nav a) znajdują się poza ekranem @ media..., są to style ogólne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-27 21:18:11
Możesz użyć js i dodać klasę w html, aby utrzymać standard komentarzy warunkowych :
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";
}
Lub użyj lib jak bowser:
Lub modernizr do wykrywania cech:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:45
Więc w końcu znalazłem własne rozwiązanie tego problemu.
Po przejrzeniu dokumentacji Microsoftu udało mi się znaleźć nowy styl IE11 only msTextCombineHorizontal
W moim teście sprawdzam style IE10 i jeśli są one pozytywne, to sprawdzam styl tylko dla IE11. Jeśli go znajdę, to będzie to IE11+, jeśli nie, to będzie to IE10.
Przykład kodu: wykrywanie IE10 i IE11 przez testowanie zdolności CSS (JSFiddle)
zaktualizuję przykład kodu z większą liczbą stylów, gdy je odkrywam.
Uwaga: to prawie na pewno zidentyfikuje IE12 i IE13 jako "IE11", ponieważ te style prawdopodobnie będą kontynuowane. Dodam kolejne testy w miarę pojawiania się nowych wersji i mam nadzieję, że będę mógł ponownie polegać na Modernizrze.
Używam tego testu do zachowania awaryjnego. Zachowanie awaryjne jest po prostu mniej efektowną stylizacją, nie ma ograniczonej funkcjonalności.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 04:44:02
I found this helpful
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Dodaj to pod swoim <head>
dokumentem
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-17 06:46:42