My website look is different between Google chrome and fire fox?

Question

My website is pixel perfect in firefox but it does not show its real look in google chrome, but I use bootstrap-4 and responsive breakpoints for my website . But why they are not working properly?

Answer 1

This is very common to see as you are designing a website. If you are fine with the look you can keep it how it is or what some developers will do is check the browser using jquery or check on the server-side. You can do a simple call and maybe set class on your body and style accordingly. I wish you luck! Here is a link to jQuery browser detection: https://api.jquery.com/jquery.browser/

Answer 2

This is normal, some attributes aren't supported or rendered the same from chrome to firefox. Most noticeable attributes are position. I advice you to look into modernizr plugin , it's very good to handle different browsers CSS

Answer 3

This is asked over and over again (with different combinations of browsers and rendering engines). But there's not really an answer. Instead, here are a few things to keep in mind to make your work look more similar across MOST popular browsers and devices.

One

There's no such thing as complete pixel perfection. Period. Even if you manage to get hit a point where a screenshot laid over the top of the source material (Photoshop, Sketch, etc) is exactly perfect, you could go to a different computer (same browser and source material) and not have it line up. But even that's unlikely as something like a Photoshop file by definition can't be responsive.

---

Two

You CAN level the playing field to make most browsers treat your code similarly. To do this, you need to understand that each browser has different defaults and then REMOVE those defaults so that your CSS represents the final solution. There are two typical ways to do this:

1. CSS Resets - these remove ALL styling and force you to build up everything.

2. CSS Normalize - which attempts to make the base styling THE SAME across all browsers. (I use a normalize in EVERY project I do)

---

Three

Learn about the CSS box-model . The relates to how browsers deal with the "boxes" of margin/padding/content that make up a rendered HTML page. The box model a browser is using, impacts sizes and spacing. A Normalize will typically fix this, but many browsers use different box models by default.

It's also worth paying attention to screen pixel densities (this impacts anything with fixed sizes) and converting to percentage-based sizing ( rem , vh/vw , % ) so that all devices start to render things as close to what you wanted as possible.

---

Four

Get to know each browser's capabilities and plan fallbacks or shims to restore/add functionality in those cases. First, check what you're trying to use with caniuse.com This will tell you if you need to use a fallback, detect missing features or just accept the fact that it won't work exactly like you want it to everywhere.