1

Consider the following example:

https://jsfiddle.net/c9pky9v1/

This renders the same in Firefox 52.0 and Chromium 56.0

Now just add this:

#content > * {
    padding-top: 15%;
    padding-bottom: 15%;
}

https://jsfiddle.net/p3nrkgoq/

suddenly the rendered site diverges:

Chromium: Padding in chromium

Firefox: Padding in firefox

Why is that and how can it be prevented?

Consider that this reset was already applied in vain:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • Even though I don't really know the problem, maybe you want to use flexbox to center your content vertically? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – lumio Mar 11 '17 at 23:02
  • How does it act in other browsers? If we knew it acted the same in all EXCEPT a specific one, it would narrow down the problem a lot. – Dave Mar 11 '17 at 23:03
  • @Dave no idea. These are the only two browser I use/have access to. Maybe others can shed some light onto this. –  Mar 11 '17 at 23:06
  • @Lumio Thanks, but no, that's not what I intend. Actually I am just curious. I got permission by another user from another question to ask this, when I answered their question and this strange bug appeared. So it's just curiousity that led me here. –  Mar 11 '17 at 23:07
  • So question is a duplicate, but it cannot be prevented unless using e.g. `display:table` instead of flex? –  Mar 12 '17 at 17:13

0 Answers0