italics creating overflow in IE7-

In all the following test cases the green box (with 10px border) contains some (justified) italic text. In the last two columns the italics are inside two table cells, with green and red borders, constituting a table with blue border.

further properties of the green box: specified width 100px no specified width: it should be 100px because of margins (and width of container) like the previous, plus hasLayout given by zoom widthless float widthless table cells table cells with width
no overflow specified
f f f f f
f f f f f
f f f f f
f f f f f
f f fj j j
f f fj j j
overflow: visible
f f f f f
f f f f f
f f f f f
f f f f f
f f fj j j
f f fj j j
overflow: hidden
f f f f f
f f f f f
f f f f f
f f f f f
f f fj j j
f f fj j j
overflow: auto
f f f f f
f f f f f
f f f f f
f f f f f
f f fj j j
f f fj j j
overflow-x: scroll
f f f f f
f f f f f
f f f f f
f f f f f
f f fj j j
f f fj j j

Notes:

  1. In IE6- a box containing italic text may be wider than correct, either when it has a specified width or with width:auto. This may increase the width of parent containers as well, since in IE6- any box expands to enclose content that should overflow. In case of italics inside a table cell, this may overlap an adjacent cell, causing borders (and backgrounds) disruption.
  2. The above expansion problem can be fixed in IE6 and IE5.5 with:
  3. The italics expansion problem has been mostly fixed in IE7, except for elements whose width is computed as shrink-to-fit: see columns 4, 5, 6 of above test cases table. This IE7 problem can be fixed with:
  4. IE5.0 has expansion but also further problems (duplication of contents in some cases) and its behavior is definitely worse, with less working fixes. In the third column hasLayout is given via a fixed height (since zoom is not supported.) The expansion problem can be fixed in IE5.0 with:
  5. Table cells always have hasLayout, addition of a width to them has no effect on the problem
  6. An inner span with position:relative fixes (partially) the cropping of the overflowing parts of the gliphs. It has no effect on the problem

This page in quirks mode: italics creating overflow in IE7- — quirks mode shows that IE7 emulates all IE6 italics problems, but cannot be fixed with overflow:visible.

Other overflow tests, overflow tests for IE.

Other problems caused by italics, specific to IE7:

CSS tests home