Some HTML/CSS rendered differently in Chrome vs FireFox/Edge

wsjb...@gmail.com

unread,

Oct 8, 2017, 6:51:54 PM10/8/17

to layout-dev

This HTML/CSS snippet renders differently in Chrome 61 (on Windows 10), as opposed to FireFox and Edge. I posted an issue through the Chrome:settings -> About link, but there apparently won't be feedback from that channel, so I am cross-posting here.

What is the difference? See snapshots below. In FireFox and Edge, the button is displayed at the same height as the word "Foo". In Chrome, the word "Foo" is rendered next to a button whose height consumes the entire window.

Given the CSS attribute set on the button, Chrome's behavior makes sense. Is the rendering by Chrome correct, and the other two browsers are wrong to display the button at the same height as the word "Foo"?

FireFox/Edge:

Chrome:

Rune Lillesveen

unread,

Oct 9, 2017, 4:46:35 AM10/9/17

to wsjb...@gmail.com, layout-dev

Looks like a height quirk difference.

You should always make your content render in strict mode by having a <!DOCTYPE html> at the top of your html documents. That will make your button not take have that tall height in chromium browsers. However, quirks mode should be the same in all browsers for compat, so please report an issue at http://crbug.com/

--
You received this message because you are subscribed to the Google Groups "layout-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to layout-dev+unsubscribe@chromium.org.
To post to this group, send email to layou...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/layout-dev/5f8abef4-5ccb-4115-8f1f-aa3f09c99cd5%40chromium.org.

--

Rune Lillesveen

unread,

Oct 9, 2017, 5:06:47 AM10/9/17

to wsjb...@gmail.com, layout-dev

The difference between the browsers here is for flex, btw.

--

Rune Lillesveen

niente5

unread,

Jun 10, 2021, 10:12:54 AM6/10/21

to layout-dev, Rune Lillesveen, layout-dev, wsjb...@gmail.com

Unfortunately there are still some huge differences in rendering between Firefox (v89) and Chrome (v91). Just an example:

<!DOCTYPE html>
<html><body>
<style>
.wrapperdiv {display:inline-block;height:150px}
.wrapperdiv IMG {width:100%;height:100%}
</style>
<div class="wrapperdiv"><img src="https://via.placeholder.com/200x300"></div>
</body></html>

Il giorno lunedì 9 ottobre 2017 alle 11:06:47 UTC+2 Rune Lillesveen ha scritto:

The difference between the browsers here is for flex, btw.

On Mon, Oct 9, 2017 at 10:46 AM, Rune Lillesveen <ru...@opera.com> wrote:

Looks like a height quirk difference.

You should always make your content render in strict mode by having a <!DOCTYPE html> at the top of your html documents. That will make your button not take have that tall height in chromium browsers. However, quirks mode should be the same in all browsers for compat, so please report an issue at http://crbug.com/

On Mon, Oct 9, 2017 at 12:51 AM, <wsjb...@gmail.com> wrote:

This HTML/CSS snippet renders differently in Chrome 61 (on Windows 10), as opposed to FireFox and Edge. I posted an issue through the Chrome:settings -> About link, but there apparently won't be feedback from that channel, so I am cross-posting here.

What is the difference? See snapshots below. In FireFox and Edge, the button is displayed at the same height as the word "Foo". In Chrome, the word "Foo" is rendered next to a button whose height consumes the entire window.

Given the CSS attribute set on the button, Chrome's behavior makes sense. Is the rendering by Chrome correct, and the other two browsers are wrong to display the button at the same height as the word "Foo"?

FireFox/Edge:

Chrome:

--
You received this message because you are subscribed to the Google Groups "layout-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to layout-dev+...@chromium.org.

To post to this group, send email to layou...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/layout-dev/5f8abef4-5ccb-4115-8f1f-aa3f09c99cd5%40chromium.org.

--
Rune Lillesveen

--
Rune Lillesveen

Ian Kilpatrick

unread,

Jun 10, 2021, 10:14:05 AM6/10/21

to layout-dev, niente5, Rune Lillesveen, layout-dev, wsjb...@gmail.com

Hi niente5,

We recently made some improvements in this area. M92/M93 renders now the same as Firefox in the above example.

Thanks,

Ian

To unsubscribe from this group and stop receiving emails from it, send an email to layout-dev+unsubscribe@chromium.org.

Christian Biesinger

unread,

Jun 10, 2021, 10:38:18 AM6/10/21

to niente5, layout-dev

Hi Niente5,

In general, I would recommend filing a bug at crbug.com/new instead of posting in a 4 year old thread.

Thanks,

Christian

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/layout-dev/45999639-1a61-4313-a126-f316a3fd6983n%40chromium.org.

Reply all

Reply to author

Forward