Wie kann man IE7 und IE8 mit kompatiblem CSS gezielt ansprechen?-CSS-Tutorial-php.cn

Wie kann man IE7 und IE8 mit kompatiblem CSS gezielt ansprechen?

Susan Sarandon

Freigeben： 2024-10-29 21:00:03

Original

685 Leute haben es durchsucht

How to Specifically Target IE7 and IE8 with Compliant CSS?

So zielen Sie gezielt auf IE7 und IE8 mit kompatiblem CSS ab

Das Erreichen eines browserspezifischen CSS-Targetings kann eine Herausforderung sein, insbesondere wenn es um ältere Versionen geht IE7 und IE8. Hier sind zwei Ansätze:

Explizites Targeting ohne Hacks mit HTML und CSS

Diese Methode basiert auf der Erstellung browserspezifischer Klassen für die Element. Zum Beispiel:

<code class="html"><!--[if IE]>
<![endif]-->
<!--[if lt IE 7 ]><html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--></code>

Nach dem Login kopieren

In Ihrem CSS können Sie dann gezielt auf bestimmte IE-Versionen abzielen:

<code class="css">.ie6 body { border:1px solid red; }
.ie7 body { border:1px solid blue; }</code>

Nach dem Login kopieren

Mit CSS-„Hacks“ auf IE-Versionen abzielen

Für CSS-„Hacks“ gelten die folgenden Regeln:

Verwenden Sie „9“, um auf IE8 und niedriger abzuzielen.
Verwenden Sie „*“, um auf IE7 und niedriger abzuzielen.
Verwenden Sie „_“, um auf IE6 abzuzielen.

Beispiel:

<code class="css">body {
  border: 1px solid red; /* Standard */
  border: 1px solid blue; /* IE8 and below */
  *border: 1px solid orange; /* IE7 and below */
  _border: 1px solid blue; /* IE6 */
}</code>

Nach dem Login kopieren

Ausrichtung auf IE10

Für IE10 , das bedingte Anweisungen nicht erkennt, verwenden Sie den folgenden Code:

<code class="html"><!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
  <head></head>
  <body></body>
</html></code>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann man IE7 und IE8 mit kompatiblem CSS gezielt ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!