Interop issues regarding tables and css tables

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]

Received on Thursday, 12 June 2014 20:36:43 UTC