Find solution
How to make scrollbar transparent which is compatible in all browsers?

What is the best way to make web applications display the same in all browsers?

  • What are some tricks, tips, techniques that you can use to make sure that your web application looks the same across all browsers (IE, Opera, Chrome, FireFox, Safari). For example I've heard using a reset.css is good practice as it resets all of the browser stylesheet defaults. Any others?

  • Answer:

    So what you really need to look at when deploying a web application across is what inconsistencies are present (functionality and design). When you are working with design (HTML and CSS), you want to make sure that all of your elements and selectors fallback on a base set of rules. This "base set" is what creates consistency with design. In terms of having a fallback specifically for HTML and CSS design, my favorite at the moment is Normalize (http://necolas.github.io/normalize.css/). There are others that work just as well, including the one you mentioned, reset.css (http://meyerweb.com/eric/tools/css/reset/). You can also look at JavaScript polyfills that "fix" inconsistencies with browsers (Read: http://remysharp.com/2010/10/08/what-is-a-polyfill/). When you are doing things such as HTML5 form validation, local storage, or any other number of things, you may need a polyfill to create consistency between browsers. To see a list of the most popular and well-supported polyfills, check out this page: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills.

Keenan Payne at Quora Visit the source

Was this solution helpful to you?

Other answers

I wouldn't aim for displaying the same across all browsers, but rather "function" the same in all browsers. Especially if you're talking about smaller CSS3 stuff like border-radius, it's just too much effort to handle IE8 etc. For writing CSS, SASS and Compass (=> http://compass-style.org/) are really helpful. SASS is a CSS precompiler which handles all the annoying browser prefixes for you. As an addition to Keenans answer: I'd always go for a normalize.css instead of a reset. A reset will lead to overwriting these resets again in a lot of cases (which is double code, then), while the normalize.css will minimize this effort at least a bit. You could also take something like Bootstrap (=> http://getbootstrap.com/) as a basic framework to begin with. This will make your development process pretty fast because almost everything you need is in there as a predefined, working set of CSS. But be careful, it adds lots of CSS code which you might not need in the end. An additional tool you could use to test is Litmus. It's actually an email layout checker, but there's also Alkaline (=> http://litmus.com/alkaline) which shows you a layout in different browsers.

Markus Bertling

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.