- From: Gérard Talbot <www-style@gtalbot.org>
- Date: Sun, 08 Mar 2015 16:22:57 -0400
- To: Greg Whitworth <gwhit@microsoft.com>
- Cc: W3C www-style mailing list <www-style@w3.org>
Le 2015-03-08 15:47, Gérard Talbot a écrit : > Le 2015-03-08 00:19, Greg Whitworth a écrit : >> Another interop issue I would appreciate input on from the WG. This >> one unfortunately is not as clear cut (most table issues aren't), but >> I do believe based on regular table markup that IE is doing the >> correct thing here. Here is the testcase: >> http://jsbin.com/yutipulode/1/edit?html,css,output >> >> It should be noted that I did add CSS for display: table-row as well >> as table-row-group just in case it was a mistake in the fix up step of >> FF or Chrome and both exhibited the same end result so I don't believe >> it has to do with that. >> >> This is how it breaks down: >> IE: All three of them render the same way >> Chrome: Renders the first one as 202px tall with a scroll bar (I >> think this is a bug, because changing overflow-y to hidden should not >> have an effect on the sizing of the table cell). Renders the last 2 >> identically >> Firefox/Presto: Renders the CSS based tables at 202px tall but an >> actual table it renders as IE does. >> >> Personally, I think that any time you use CSS tables it should have >> the same end result as using actual tables, thus I think IE has the >> correct behavior here but am willing to listen to arguments on why >> Clamping the table height in a CSS table while not doing that for a >> regular table makes sense. >> >> Thanks, >> Greg > > > > .replay { > height: 100%; > ... > } > > " > 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. > " > http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#height-layout > > This will affect the HTML table (3rd table); it may be ignored and, > like Boris said, it must be ignored anyway since the <table>'s > 'height' is 'auto' to begin with. > > ------- > > In this chunk of code: > > <div class="lichess_ground" style="display: table-cell; height: > 202px;"> > <div class="replay" style="height: 100%;"> > > 'height: 100%' is not ignored and can be computed and rendered. > > ------- > > Another issue with the code is that the cell has a border and that > creates an overconstrained situation: > > <div class="lichess_ground" style="display: table-cell; height: > 202px;"> > <div class="replay" style="height: 100%; border: 1px solid > #ccc;"> > > " > In CSS 2.1, the height of a cell box is the minimum height required by > the content. > " > http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#height-layout > > So, the height of the table cell must increase to 204px... which may > not be (highly probable) what the original author initially aimed > at/for. > > Computed height value in Firefox36 is, as expected, **_204px_** and not > 202px. > > Computed height value in Chrome41.0.2272.76 is **_202px_**: that's a > bug. And notice that inner div gets resized to 200px. Chrome resizes > the descendant when it should be resizing the cell. > > http://www.gtalbot.org/BrowserBugsSection/css21testsuite/overconstrained-CSS-table-cell-height.html A more noticeable, glaring test: http://www.gtalbot.org/BrowserBugsSection/css21testsuite/overconstrained-CSS-table-cell-height-2.html IE11, Firefox 36 and Opera 12.16 (Presto engine) pass this test. Chrome 41.0.2272.76 fails this test. Gérard > > ------ > > The 3rd table (the <table> one) in > > http://jsbin.com/yutipulode/1/edit?html,css,output > > definitely has its cell using a 'padding: 1px' . This is not the case > for the top first 2 CSS tables. > > Gérard
Received on Sunday, 8 March 2015 20:23:31 UTC