CSS
Internet Explorer-hackar
Sök…
Anmärkningar
Dessa "hacks" kan användas för att rikta in sig på en specifik webbläsare / klient. Detta kan användas för att hantera skillnader i webbläsarnas rendering genom att tillämpa stilar i en av de omslag som listas ovan.
Högkontrastläge i Internet Explorer 10 och högre
I Internet Explorer 10+ och Edge tillhandahåller Microsoft media-väljaren med -ms-high-contrast
att avslöja inställningen "Hög kontrast" från webbläsaren, vilket gör att programmeraren kan justera webbplatsens stilar i enlighet därmed.
-ms-high-contrast
tre tillstånd: active
, black-on-white
och white-on-black
. I IE10 + hade den också ett none
tillstånd, men det stöds inte längre i Edge framöver.
exempel
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
.header{
background: #fff;
color: #000;
}
}
Detta kommer att ändra rubrikbakgrunden till vit och textfärgen till svart när högkontrastläget är aktivt och i black-on-white
läge.
@media screen and (-ms-high-contrast: white-on-black) {
.header{
background: #000;
color: #fff;
}
}
Liknar det första exemplet, men detta väljer specifikt bara white-on-black
tillståndet och omvandlar rubrikfärgerna till en svart bakgrund med vit text.
Mer information:
Microsoft-dokumentation på -ms-high-contrast
Endast Internet Explorer 6 & Internet Explorer 7
För att rikta in sig på Internet Explorer 6 och Internet Explorer 7, starta dina egenskaper med *
:
.hide-on-ie6-and-ie7 {
*display : none; // This line is processed only on IE6 and IE7
}
Icke-alfanumeriska prefix (andra än bindestreck och understreck) ignoreras i IE6 och IE7, så det här hacket fungerar för alla obefixade property: value
par.
Endast Internet Explorer 8
Om du @media \0 screen { }
rikta in sig på Internet Explorer 8 ska du @media \0 screen { }
in dina väljare på @media \0 screen { }
:
@media \0 screen {
.hide-on-ie8 {
display : none;
}
}
Allt mellan @media \0 screen { }
behandlas endast av jag
Lägga till Inline Block-stöd till IE6 och IE7
display: inline-block;
display
med värdet av inline-block
stöds inte av Internet Explorer 6 och 7. En lösning för detta är:
zoom: 1;
*display: inline;
zoom
utlöser hasLayout
funktionen för element, och den är endast tillgänglig i Internet Explorer. *display
ser till att den ogiltiga egenskapen bara körs i de drabbade webbläsarna. Andra webbläsare ignorerar helt enkelt regeln.