IEfixObjectTags

Das Problem

Der Microsoft Internet Explorer passt die Größe von object-Tags nicht automatisch an. Und wenn ein Bild mit einem object-Tag eingebettet wird, bei dem width- und height-Attribut gesetzt sind, werden innerhalb des Objektrahmens freiräume um das Bild herum gelassen und der Objektrahmen bekommt Bildlaufleisten.

Siehe dieses Beispiel und diese Simulation davon, wie es in MSIE aussieht. (Wenn sie MSIE benutzen um sie zu betrachten, sehen beide Dokumente ungefähr gleich aus.)

Die Lösung

Binden sie das iefixobjecttags-Skript im Kopfbereich ihres Dokumentes ein. Es wird die object-Tags automatisch korrigieren. In anderen Browsern als dem Microsoft Internet Explorer tut das Skript überhaupt nichts. Darum sollte das referenzierende Script-Tag am Besten in einen Conditional Comment verpackt werden.

<!--[if IE]>
<script language="Javascript" type="text/javascript" defer="defer" src="/js-lib/iefixobjecttags.js"></script>
<![endif]-->

Jetzt brauchen sie nur noch sicherzugehen, dass jedes Object-Tag ein type-Attribut hat. Das Skript braucht den Datentyp um zu entscheiden, was getan werden muss.

Hier können sie es in Aktion sehen.

Ein Problem haben wir jetzt noch. Version 6 des Internet Explorers erlaubt noch keine ineinander verschachtelten object-Tags. Will man ein Medienobjekt in zwei alternativen Formaten einbetten, so werden manchen Nutzern beide Objekte gleichzeitig angezeigt, statt nur dem ersten, das vom System unterstützt wird. Um verschachtelte object-Tags hinzubekommen, müssen wir zu einem kleinen Trick greifen. Die inneren object-Tags werden durch Conditional Comments zunächst vor dem Internet Explorer verborgen, wie im folgenden Beispiel:

<object type="image/svg+xml" data="example.svg" width="100%">
  <!--[if fallback 1]><!-->
  <object type="image/png" data="example.png">
  <!--<![endif]-->
    <!--[if fallback 2]><!-->
    <object type="text/html" data="example.html" width="100%" height="100%">
    <!--<![endif]-->
      Object-Tags funktionieren nicht. Ersatztext folgt.
      ...
    <!--[if fallback 2]><!-->
    </object>
    <!--<![endif]-->
  <!--[if fallback 1]><!-->
  </object>
  <!--<![endif]-->
</object>

Wenn das erste Objekt nicht geladen werden kann, aktiviert das Skript das nächste Ersatzobjekt.