Browser compatibility issues are always a headache, here are 5 tips to avoid some potential problems.
1. Use style resets
You can use normalize.css or reset.css or whatever styles you can find on the web. I’m going to give you one from the Genesis framework.
2. Css3 browser vendor compatibility prefix
If you’re using the latest CSS code, such as box-sizing or background-clip, make sure you use the appropriate vendor prefix.
3. Avoid using paddingj with width
When you add padding to an element that contains width, it is larger than it should be. Because width and padding are going to add together. For example, if the width of an element is 100px, add a 10px padding. Some browsers will display the element as 120px wide. To solve this problem, do the following:
4. Float clearing
Make sure you get rid of all the floats, because if you don’t, something really weird could happen. You can use the following method to clean up the float:
5. Test it out
Test your page across browsers to see how it looks in each browser
By completing the above five steps, you can find and resolve compatibility issues before the official release of the page
