By using web standards APIs and polyfills. Polyfills will backfill features if the browser does not support something. They cover many of the compatibility use cases these days... if you're willing to neglect IE <8.

The NPM package core-js will cover most core features, such as Object.assign(), promises, array operators, etc (npmjs.com/package/core-js). There are other polyfills for things like the Fetch API, web animations, etc.

Also embrace the principles of progressive enhancement and graceful degradation. My team develops with the evergreen browsers in mind: Chrome, Firefox, Safari, Edge. It's too time consuming to account for all of the quirks of IE <9, so our page will gracefully degrade and only have limited functionality for older browsers. (If someone is still using IE 7 they don't deserve to use the Internet, right?)

If you have the time and resources, write automated unit tests and end-to-end tests and run them under several browsers. Tools like Karma, Protractor, Selenium can help with this.

Always try to use established css frameworks like Bootstrap , Foundation and you need not to worry about cross -browser compatibility.

If you are writing some custom code and not sure about browser compatibility check caniuse.com (it will show support for particular features in all browsers), or try to use modernizer.

its always good to check the behavior in common browsers Chrome, Mozilla, Safari, IE before the final launch.

The first step, before starting development, is define list of devices you want to support. Otherwise, your client can always find out some device with it your web doesn't work.