The Transitional doctype allows for older elements to appear in the source, without getting errors in the validator. In addition, it triggers what is known as "almost standards" mode, a rendering mode that is, well, almost the same as standards mode, but not quite. Actually it's a kind of quirks mode, only with fewer quirks. Not as bad, but certainly as unpredictable!
According to the official sources, there is one difference in rendering between standards and almost standards mode: when displaying an image in a block, almost standards mode does not leave room for the descender below it (as long as the image is the only content of the block). This is the same behaviour as in quirks mode.
However, IE doesn't cooperate fully. If there are spaces in the HTML around the image, IE does leave room for the descender in quirks mode, but not in almost standards mode. So in other words, this source
<style> .container {border:1px solid; margin:3px 0; font-size:30px; width:30px;}
</style> . . <div class="container"><img alt="" src="pic.png"></div> <div class="container"> <img alt="" src="pic.png"> </div>
The top block behaves by the rules, but the bottom one has room for the descender in quirks mode, just like
standards mode.
All other browsers follow the rules, behaving as expected.
Showing in standards mode. Show in quirks or almost standards mode.
That's all as far as the formal differences are concerned. However, there are other differences as well.
In standards mode, any line height on an inline element inside a block is used only when it's larger than the
block's line height; otherwise it's ignored. In quirks mode, the line height is always honoured. And ditto in almost
standards mode.
Note that line-height depends on the font-size, so a change in font-size will also result in a change in
line-height, at least if it's specified as a unitless number (e.g. 1.25
). line-heights specified in
length units (like 1.25em
) will be inherited as their computed values, i.e. in pixels, and are not
influenced by changes in font size.
<div style="width:15em;">A div with <span style="line-height:1ex">a span having a much smaller line height, which causes the lines to be very close together.</span></div>
Most browsers do this, although this can hardly be found in the online resources about differences between the modes.
Showing in standards mode. Show in quirks or almost standards mode.
Paragraphs can not contain block elements, so if a block appears in a paragraph, the paragraph should end before the block begins. Given this HTML
<p style="color:green">the paragraph before the table <table><tr><td>in the table</td></tr></table> text after the table</p>
all browsers correctly let the paragraph end in standards mode. With the transitional doctype however, Konqueror will put the table in the paragraph.
the paragraph before the table
in the table |
Showing in standards mode. Show in quirks or almost standards mode.