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 |
|
|
|
|
|
overflow: visible |
f f f f f |
|
|
|
|
|
overflow: hidden |
f f f f f |
|
|
|
|
|
overflow: auto |
f f f f f |
|
|
|
|
|
overflow-x: scroll |
f f f f f |
|
|
|
|
|
Notes:
- 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.
- The above expansion problem can be fixed in IE6 and IE5.5 with:
- overflow:hidden, if the box has a specified width, but not in the case of table cells
- overflow:visible/auto, if the box has hasLayout (including the case of table cells)
- 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:
- overflow:hidden, in all cases except for the table cells
- overflow:auto, in all cases
- 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:
- overflow:hidden, if the box has a specified width, but not for table cells
- overflow:auto, if the box has a specified width and for table cells
- Table cells always have hasLayout, addition of a width to them has no effect on the problem
- 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