italics creating overflow in IE7- — quirks mode

This page is the quirks mode version of italics creating overflow in IE7- — standards mode. It shows that IE7 in quirks mode has the italics expansion problem like IE6 (both in quirks and in strict mode), but one of the fixes doesn't work for it (overflow:visible). In other words this means that there are cases where IE7 in quirks mode does not behave the same as IE6 in quirks mode, which is not intended according to Details on CSS changes for IE7 and CSS Compatibility 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- (and higher in quirks mode) 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 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. In quirks mode the above expansion problem can be fixed with:

This page in standards mode: italics creating overflow in IE7- — standards mode.

Other overflow tests, overflow tests for IE.

Other problems caused by italics, specific to IE7: IE7 unnecessary horizontal scrollbar caused by italics, IE7 stacking problems caused by italics.

CSS tests home