Fehlerhafte Implementation der Breiten- und Höhenangaben (IE 5) - Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Fehlerhafte Implementation der Breiten- und H&ouml;henangaben (IE 5) - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description" content="&Uuml;bung Cascading Style Sheet. Internet-Explorer: Fehlerhafte Implementation der Breiten- und H&ouml;henangaben (IE 5)." />
 <meta name="keywords" content="HTML, Cascading Style Sheet, CSS, Listensymbol, Liste" />
 <meta name="author" content="Dr. Roland Unger" />

 <style type="text/css">
 <!--

  .ohneRaender {
     padding: 0;
     margin: 0 auto;
     border: 1px solid #000;
     width: 16em;
     text-align: justify;
  }

  .mitRaender {
     padding: 2em;
     margin: 2em auto;
     border: 1px solid #000;
     width: 16em;
     text-align: justify;
  }

  .korrigiert {
     padding: 2em;
     margin: 2em auto;
     border: 1px solid #000;
     text-align: justify;
     width: 16em !important;
     width: 20em;
  }

  /* Jetzt folgt die Korrektur für IE 5
     Mit dem Star-HTML-Hack versteckt vor
     Linux Konquerer u.a.                 */

  * html .korrigiert {
     width/**/:/**/16em;
  }

  body {
    text-align: center;
  }

  body * {
    text-align: left;
  }

  -->
 </style>
</head>

<body>

<h2>Workshop Internet-Präsenz</h2>

<h3>Internet Explorer 5.x: Fehlerhafte Implementation
der Breiten- und Höhenangaben - Cascading Style Sheet</h3>

<div class="ohneRaender">Diese Text enthaltende
Box besitzt weder einen Innenabstand noch einen
äußeren Rand.</div>

<div class="mitRaender">Diese Text enthaltende
Box besitzt sowohl einen Innenabstand und einen
äußeren Rand. Das Textfeld sollte dieselbe Breite
besitzen wie die erste Box, die Gesamtbox ist aber
breiter. Im Falle des Internet Explorers (vor Version
IE6/strict) ist das Textfeld kleiner, die
Gesamtbreite identisch zur oberen Box. Beim
Internet-Explorer 5.x werden fälschlicherweise
<em>margin</em> und <em>padding</em> in der Breite
mit berücksichtigt.</div>

<div class="korrigiert">Eine Korrektur unter
Nutzung der !important-Regel und eines Fehlers
bei der Behandlung lehrer Kommentarfehler. Dieser
Hack ist <em>normenkonform</em>!</div>

<p>Folgende Fehler im Internet Explorer lassen sich
zur versionsabhängigen Korrektur im Internet Explorer
nutzen:</p>

<ul>
 <li>Der Internet Explorer (Windows) versteht die
  !important-Regel nicht.</li>
 <li>Eine Eigenschaft, die unmittelbar von einem
  leeren Kommentar gefolgt wird – z.B. width/**/: –
  wird vom vom IE 5.0 (Windows) und IE 5 (Mac) nicht
  ausgeführt.</li>
 <li>Eine Eigenschaft, die unmittelbar von einem
  leeren Kommentar mit mindestens einem Leerraum gefolgt
  wird – z.B. width/* */: –  wird vom vom IE 5.0 (Windows)
  und IE %5 (Mac) nicht ausgeführt. Zusätzlich wird die
  Folgezeile nicht ausgeführt.</li>
 <li>Wenn ein Kommentar unmittelbar vor einem
  Eigenschaftswert steht – z.B. /**/10em –, dann wird
  diese Zeile vom IE 5.5 (Windows) nicht ausgeführt.</li>
 <li>Wenn eine Eigenschaft vor dem Doppelpunkt von mindestens
  einem Leeraum und dann einem Kommentar gefolgt wird, so
  wird diese Zeile vom Internet Explorer 6 ignoriert.</li>
</ul>

<p>Folgendes geschieht mit</p>

<pre>     width: 16em !important;
     width: 20em;
     width/**/:/**/16em;</pre>

<ul>
 <li>Die erste Zeile wird von allen Browsern gewählt, die
  die !important-Regel beherrschen (nicht vom Internet
  Explorer). Alle folgendenden Zeilen werden wegen dieser
  Regel ignoriert.</li>

 <li>Die nächste Zeile wird von allen Browsern ausgeführt,
  die die !important-Regel nicht kennen (z.B. Internet
  Explorer). Die Breitenangabe in dieser Zeile muss die
  Werte für <em>padding</em> und <em>margin</em> beider
  Seiten enthalten.</li>

 <li>Der erste Kommentar in der letzten Zeile versteckt
  diese Eigenschaft vor IE 5.0 (Win) und IE 5 (Mac). Der
  zweite Kommentar versteckt sie vor IE 5.5 (Win). Sie
  wird aber nicht vor IE 6 versteckt.</li>
</ul>

<p>Man könnte auch schreiben:</p>

<pre>     width: 16em !important;
     width /**/: 20em;</pre>

<p>Siehe auch die Kommentare unter:</p>

<ul>
 <li><a href="http://css-discuss.incutio.com/?page=BoxModelHack" target="_top">Why does the CSS box model need a hack?</a></li>
 <li><a href="http://www.info.com.ph/~etan/w3pantheon/style/abmh.html" target="_top">Alternate Box Model Hacks</a> (Edwardson Tan)</li>
</ul>

</body>
</html>