IE 7 bug: declared width for table cell wrongly affects inner block

Circumstances

• IE 7 in “standards mode” (!)
• a single-cell table, which has border="1" for clarity
• the cell has a declared width of 100 pixels, set in CSS (setting it in HTML leads to the same problem)
• the cell contains a div box (here styled with yellow background and a border for clarity)
• the box contains a long word that does not fit into a 100px wide area

Correct behavior

The browser should treat the declared width as suggested minimum width, and since it is not sufficient here, it that width should effectively be ignored. (This is what IE 7 does, too, so this is not the problem.)

The box inside the cell has no declared width, so the initial value of width: auto applies. Thus, the box should have the same width as its container box, the cell, minus padding and border.

The test

Observations

• The box is 100px wide only, i.e. it has the width declared for the container cell, not its actual width.
• There is line wrapping in the box and overflow of the long word. This is consistent with the 100px width. The problem (bug) is that width.
• In “quirks mode” (e.g., if we add the empty comment declaration <!----> at the start of the document), the bug does not appear the same way, since the background and the border appear as if the box were the same width as the container cell. However, the text still line wraps as if the width were 100px!

Hypothesis

IE 7 first tentatively sets the cell width to 100px and the box width to the same value, minus padding and border. It then formats the box content and observes the long word, which is too long for that width. It expands the cell to accommodate the long word. However, it forgets to expand the div box accordingly and to reformat its content.