DIV-Breite ändert sich bei kursiver Schrift

[Der Martin]

n'Abend,

Es sieht folgendermaßen aus: Der DIV-Block hat eine feste Breite. Wenn dieser allerdings einen längeren (sprich: mehrere Zeilen langen) kursiv formatierten Blocksatz-Text beinhaltet, überschreitet der Internet Explorer die angegebene Breite von 615 Pixeln.

das ist ein nicht ganz einleuchtendes Fehlverhalten des IE, das durch zwei Bugs entsteht, die hier zusammenfallen. Zum einen berücksichtigt er beim Berechnen der Abmessungen einer Textbox nicht, dass der Text darin kursuv sein soll, zum andern macht er ein Element automatisch breiter, wenn der Inhalt es erfordert, auch wenn für das Element eine feste Breite gesetzt ist.

<div style="width: 615px; border: 1px solid black">

<p style="text-align: justify; font-style: italic">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

  
Diesen unschönen IE-Effekt kannst du vermeiden, indem du dem div-Element für den IE overflow:hidden zuweist. Dann wird eventuell zu großer Inhalt beim Rendern einfach am Rand abgeschnitten, die Box aber nicht mehr vergrößert. Damit der Rand der Kursivschrift dann nicht abgeschnitten aussieht, empfiehlt sich dazu ein padding von ein paar px.  
  
So long,  
 Martin  

-- 
Ja, ja... E.T. wusste schon, warum er wieder nach Hause wollte.