Schlagwort: Internet Explorer

Detect Internet Explorer and Google Chrome Frame with JavaScript

To make the Internet Explorer HTML5-competitive it is advisable to install Google Chrome Frame. JavaScript allows to discover whether Google Chrome Frame is already installed.

if(navigator.appName == 'Microsoft Internet Explorer'){
  var hasChromeFrame = navigator.userAgent.match(/(chromeframe)/);
  if(hasChromeFrame == null){
    window.location = 'http://www.google.com/chromeframe';
  }
}

Another option is to use some Google stuff. But then the dialog to install Chrome Frame (CF) is only shown once per session:

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script type="text/javascript">
  // Check if Chrome Frame is installed and display an overlay if not
  CFInstall.check({
    mode: "overlay"
  });
</script>
<![endif]-->

Internet Explorer Kompatibilitätsansicht verhindern

Mit dem Internet Explorer 8 hat Microsoft die Kompatibilitätsansicht eingeführt. Mit der Kompatibilitätsansicht wird die Rendering-Engine des Internet Explorers auf eine Vorversion gestellt, wodurch Webseiten, die für ältere IE-Versionen entworfen wurden, besser angezeigt werden können. Der „Compatibility Mode“ wird durch ein Icon in der Adresszeile eingeschaltet.


Kompatibilitätsansicht im IE9

Für Webdesigner ist das Icon der Kompatibilitätsansicht ein Dorn im Auge, da es aussieht wie ein zerrissenes Dokument und dadurch der Eindruck entsteht, dass etwas mit der eigenen Webseite nicht in Ordnung ist. Um das Icon zu entfernen, muss die eigene Webseite selbst den Kompatibilitätsmodus bestimmen. Dazu wird der kompatible User-Agent als Meta-Tag für den Internet Explorer im head-Bereich der Seite angegeben:

1
2
3
4

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>

Die gezeigte Variante stellt die Render-Engine des Internet Explorers auf die Version von Internet Explorer 7 um, was dazu führt dass beispielsweise ein Internet Explorer 9 die Webseite anzeigt wie der IE7.

Möchte man sich nicht auf eine spezielle IE-Version festlegen, sondern immer die Aktuellste benutzen, so muss folgender Eintrag gemacht werden:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Suckerfish CSS done right!

Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.

Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS „hover“-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.

Der Internet Explorer 6 unterstützt die „hover“-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).

Screenshot:

Suckerfish CSS done right! weiterlesen

IE8 mit IE7 – Verhalten

Bei der Darstellung von HTML-Elementen und CSS-Formatierung gibt es zwischen dem Internet Explorer 8 und dem Internet Explorer 7 gravierende Unterschiede. Besonders die verschiedene Interpretation von Abständen (padding, margin) bereiten Web-Entwicklern große Probleme.

Sehr oft musste man Conditional Comments benutzen, um die verschiedenen Anzeigen zu bewältigen. Doch damit ist jetzt Schluss! Microsoft hat im IE8 eine Funktion zur Abwärtskompatibilität eingebaut, so dass es möglich ist, das Anzeigeverhalten vom IE8 auf das Anzeigeverhalten vom IE7 einzustellen.

Dafür ist nur folgender Code nötig:

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>Titel</title>
</head>
<body>
  <p>Diese Webseite sieht im IE8 so aus wie im IE7.</p>
</body>
</html>

Mehrere IE gleichzeitig installieren

Mit dem Programm IETester können mehrere Internet Explorer Versionen gleichzeitig verwendet werden. Die einzelnen Versionen müssen dazu nicht einmal einzeln installiert werden. IETester unterstützt IE5.5, IE6, IE7, IE8 und funktioniert unter Windows XP, Vista und Windows 7.

Das Schöne an IETester ist die komfortable Handhabung, die saubere Funktionsweise, das schicke Design und der Fakt, das es kostenlos ist.