Is it a problem in this HTML that causes FF and Chrome to render this `vertical-align: baseline` differently?

Question

I've been doing some work with Blazor and the Blazorise library. I've hit a difference in layout between FF and Chrome that is screwing up the look of my grids

I can replicate it on their demo site: https://bootstrapdemo.blazorise.com/tests/datagrid

If I..

• head there and set the Edit Mode dropdown to Inline
• hit edit on any row
• Inspect the first element
• Change the class .table td class vertical-align: top so that it's baseline instead

I end up with this in FF:

And this in Chrome:

The bottom of the text in Chrome is all aligned. In FF, the plain text "2" is low

You might notice that there's a slight bug in the grid HTML render, in that the row in edit mode is not contained in a <tr; Blazorise team are aware of this, but doesn't seem to be the cause though, as I've manually added all the <td into a <tr and I still find that Firefox renders plain text lower than text in some edit controls (but not others).

So, I'm curious to know if this is an FF bug, a Chrome bug (chrome rendering is what I'd consider correct), a difference in opinion between the two camps that is unlikely to be considered a bug, or if there's something I can do to my blazorise grids (or pass on to the blazorise team) i.e. some missing HTML that, if included, would make FF align the content well.

When rendering "non editable text" like the "2" Blazorise puts it in the <td directly, whereas editable things get a relevant <input. Date and text inputs render higher up, while plain text, checkboxes, comboboxes, bootstrap alerts and buttons are lower down:

Answer 1

Blazorise creator here. The issue is going to be fixed in the next release and is scheduled for July 18th.