Das Problem

IE6 weitet die Box aus und zerstört dadurch das Layout. In meinem Fall rutschte die Seitenleiste rechts unter den eigentlichen Inhalt. IE7 zeigt zwar einen Scrollbalken an, platziert diesen aber innerhalb statt unterhalb der Box, was bei Elementen, die nur eine einzige Zeile beinhalten, dazu führt, dass der Text hinter dem Scrollbalken verschwindet und ein unbedienbarer (weil winziger) vertikaler Balken angezeigt wird.

Die Lösung

Hier ist die Lösung, die ich nach einigem Googlen und Probieren gefunden habe. Dieser Schnipsel sollte in ein separates IE-Stylesheet eingebaut werden, das per conditional comments nur von IE <= 7 geladen wird (bei IE8 tritt das Problem nicht auf).

pre
{
  /* disable vertical scroll bar */
  overflow-y: hidden;

  /* fallback if scripting is disabled */
  padding-bottom: 20px;

  /* add padding if content is wider than the box */
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "20px" : "0");

  /* prevent the box from expanding */
  width: 100%;
  }

Falls JavaScript deaktiviert ist, wird das Padding von 20px immer eingefügt. Das führt zwar zu unschönen Abständen, wenn kein Scrollbalken angezeigt wird (d.h. wenn der Inhalt nicht breiter als die Box ist), ist aber auf alle Fälle besser als die ursprüngliche Darstellung.