Re: Percentage Height of a Replaced Element in a Table Cell

Le Mar 7 août 2012 17:57, Robert Hogan a écrit :
> My snippets were incorrect. :(
>
> So let me try that again:
>
> Browsers disagree on how to render this snippet:
>
>         <table style="width:20px;height:20px">
>             <tr>
>
> <td style="width:100%;height:100%"><img style="height:100%"
> src="50x50.png"></td>
>             </tr>
>         </table>

The same logic given, explained before will apply.

"
CSS 2.1 does not define how the height of table cells and table rows is
calculated when their height is specified using percentage values.
"
17.5.3 Table height algorithms
http://www.w3.org/TR/CSS21/tables.html#height-layout

So, the used height fo the table-cell could be any value (20px or 50px
or 123px); it is undefined.


>
> WebKit, FF: the image is rendered as 50x50
> IE, Opera: the image is rendered as 20x20
>
> I believe IE and Opera are correct here: "The percentage is calculated
> with
> respect to the height of the generated box's containing block." Going up
> the chain this is 20px.
>
> This is distinct from the following case, where rendering 50x50 would be
> the right thing to do:
>
>         <table>
>             <tr>
>                 <td><img style="height:100%" src="50x50.png"></td>
>             </tr>
>         </table>
>
> "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 value computes to 'auto'."

Yes, this is the right thing to do: img's containing block is the
table-cell which uses 'height: auto', so the img intrinsic height and
width will be used.

>
> Am I right in thinking this?
>
> Thanks,
> Robert


(More on what I wrote in my previous email)

Regarding 'overflow: visible' and table-cell element and table element:

Overflow and table-cell (non-replaced inline element):

[nightly-unstable]
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/fixed-table-layout-009.htm


[RC6]
http://test.csswg.org/suites/css2.1/20110323/html4/fixed-table-layout-009.htm

Proposed improvement:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/fixed-table-layout-009.html

http://test.csswg.org/shepherd/testcase/fixed-table-layout-009/

----------

[RC6]
http://test.csswg.org/suites/css2.1/20110323/html4/overflow-applies-to-007.htm

[RC6]
http://test.csswg.org/suites/css2.1/20110323/html4/overflow-applies-to-013.htm

http://test.csswg.org/shepherd/testcase/overflow-applies-to-013/


Gérard
-- 
Contributions to the CSS 2.1 test suite:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

CSS 2.1 Test suite RC6, March 23rd 2011:
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

CSS 2.1 test suite harness:
http://test.csswg.org/harness/

Contributing to to CSS 2.1 test suite:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html

Received on Tuesday, 7 August 2012 22:33:38 UTC