- From: Gérard Talbot <www-style@gtalbot.org>
- Date: Sun, 08 Mar 2015 15:47:39 -0400
- To: Greg Whitworth <gwhit@microsoft.com>
- Cc: www-style list <www-style@w3.org>
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 ------ 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 19:48:10 UTC