Solve Cross Browser Compatibility Issues

STEP-1: After write code validate HTML and css

1. Write well know and and align code
2. Insert comment for better understand
3. Indentation match and ensure open-closing tag
4. Use Jigsaw css validator
5. Use Js formatter for javascript code and HTML
6. Use Css lint and eslint
7. validate with w3school html validator and solve the issue.
8. Before/after write code always check with browser support I mentioned here some tools [BrowserStack(paid),Browserling(free+paid), IE NetRenderer(free)]

STEP 2: Use css reset and html reset

1. You can use Normalize.css
2. HTML5 Reset and
3. Eric Meyer’s Reset CSS

STEP 3: Maintain Layout structure.

1. Always use HTML viewport metatag
2. CSS Multiple Columns click here to know more
3. CSS Flexbox and Grid click to know more

STEP 4: Detect feature so during development

Here I mentioned some tools

1. modernizr
2. Polyfill

STEP 5:

Test on real device you can also use some tools like browserstack but I will recomend real device always better.

STEP 6:

1. Always keep update you libaray and packages
2. Use modern frontend frameworks as like reactJs, VueJs or AngularJs and keep up to date it's a good practice
3. Always use big comunity support frameworks so that you get better support for feature.

Thanks for your time:
You can reach me at : https://www.linkedin.com/in/nipuchakraborty