W3C home > Mailing lists > Public > www-style@w3.org > June 2014

Re: Interop issues regarding tables and css tables

From: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 12 Jun 2014 23:35:51 -0400
To: Greg Whitworth <gwhit@microsoft.com>
Cc: W3C www-style mailing list <www-style@w3.org>
Message-ID: <d5da5fb765696e2c6e4424830361cbbe@gtalbot.org>
Le 2014-06-12 16:36, Greg Whitworth a écrit :
> This is a multi-part problem that I'll _try_ to explain succinctly.
> We found the following an interop issue[1] where Blink/Gecko set the
> baseline for text in a table cell at the top when an image is included
> in the same row. IE sets the baseline as the height of the entire row
> including the image. To test this behavior further I swapped out the
> image with another replaced element, this time a generic iframe and
> now Blink/Gecko offer the same behavior as IE. I would have expected
> all of these to produce the same result (matching IE's behavior).
> This morning an interop issue was brought to our attention[3]
> regarding the CSS display: table and I think it is the same problem.
> There is a weird behavior here where he has set a span to be
> vertical-align: top and Gecko/Chrome pass this behavior on to the next
> cell which is not encased in a span. If you remove the <span>
> Chrome/Gecko behave the same as IE [4]. What's interesting here, is if
> you now replace the image with an <iframe> (mimicking our second demo)
> all three browsers render the same [5].
> Because of this, I propose the following:
> 1. Demo [1] is a bug in Blink/Gecko or we all have bugs for all other
> replaced elements in rows. Also, the CSS table from demo [4] should
> behave the same as demo 1 which it does not.
> 2. Demo [3] is a bug in Blink/Gecko as the vertical align should only
> be applying to the span, not to the next cell. Here is a demo of the
> same CSS demo in a basic table and you will see it behaves the same
> [6], but Blink does not when you replace the image with an iframe,
> however in this case Gecko does [7].
> Again, sorry for the verbosity in this but it seems like Blink and
> Gecko are going down different code paths when rendering a table using
> CSS Display as well as when an image is included in a cell in the row
> (either CSS or normal HTML). With that being said if you remove
> inline-block from the span Blink and Gecko do not agree [8].
> Very strange and I would like to come to a consensus on how to address
> these issues.
> Thanks,
> Greg
> [1] http://jsfiddle.net/grjL5/ basic table with image in row
> [Blink/Gecko Agree | IE does not]
> [2] http://jsfiddle.net/grjL5/5/ basic table with iframe in row
> [Blink/Gecko/IE Agree]
> [3] http://jsfiddle.net/3KZqr/24/CSS table with vertical align and
> inline block [Blink/Gecko Agree | IE does not]
> [4] http://jsfiddle.net/3KZqr/21/ CSS table with no <span> (removing
> vertical align) [Blink/IE/Gecko Agree]
> [5] http://jsfiddle.net/3KZqr/22/ CSS table with an iframe instead of
> image [Blink/IE/Gecko Agree]
> [6] http://jsfiddle.net/grjL5/8/ CSS Table converted to Basic Table
> [Blink/IE/Gecko Agree]
> [7] http://jsfiddle.net/grjL5/9/ basic table with vertical align on
> span [Blink/IE Agree | Gecko does not]
> [8] http://jsfiddle.net/3KZqr/27/ CSS table with inline-block removed
> [Blink/IE Agree | Gecko does not]


1- Do you get the same test results (and/or agreements) if you remove
<tbody style="vertical-align: baseline;">
from all 8 tests?

2- What is the IE11's user agent style sheet for tr and td elements 
inasmuch as vertical-align is involved? I ask because according to
it is
tr {vertical-align: middle;}
td {vertical-align: middle;}
whereas, in Firefox 30 and Chrome 35, it is
tr {vertical-align: inherit;}
td {vertical-align: inherit;}
and that would (or should or could) make a difference here in your 8 

3- CSS tables creates necessary missing anonymous table sub-elements 
(like tbody and tr) which may not have no vertical-align declarations, 
like vertical-align: inherit whereas HTML tables do have.

Example given:

CSS table:

Same code but as an HTML table:
and the blue square should be at the bottom-left corner in Firefox 30 
and Chrome 35.., all because of tr {vertical-align: inherit;} and td 
{vertical-align: inherit;} in the user agent style sheet.

> [6] http://jsfiddle.net/grjL5/8/ CSS Table converted to Basic Table
> [Blink/IE/Gecko Agree]

Firefox 30 and Chrome 35.0.1916.153 disagree.

Received on Friday, 13 June 2014 03:36:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:43 UTC