- From: Robert Hogan <robhogan@gmail.com>
- Date: Thu, 13 Nov 2014 16:18:38 +0000
- To: www-style list <www-style@w3.org>
- Message-ID: <CAD1xn+P437oO9KGe9U0cBpTYY-HwAT0m_f2NvKirA2wTDrK7mw@mail.gmail.com>
At https://crbug.com/422919 we have an interoperability difference between Blink and FF/IE we would like to sort out. In the following test case Blink renders the images as 300px high, while FF/IE render it as 100px high. <style> #outer { height: 100px; outline: 1px solid; position:relative; } #inner { top:0; bottom:0; position:absolute; } img { max-height: 100%; } </style> <div id="outer"> <div id="inner"> <img src="http://placehold.it/300x300" /> </div> </div> Also available at: http://jsfiddle.net/yhd7bL1a/1/ In Blink we render it as 300px because http://dev.w3.org/csswg/css2/visudet.html#min-max-heights <http://www.w3.org/TR/CSS21/visudet.html#min-max-heights> says: "The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height')." In the test, 'inner' is the containing block and it doesn't have a height specified explicitly, so Blink treats the max-height as none. FF/IE seem to treat the top/bottom values of inner as making the height of inner explicit enough to treat as though it had been specified - presumably leaning on the part that talks about depending on content height. What is the correct behaviour? Thanks, Robert
Received on Thursday, 13 November 2014 16:19:06 UTC