CSS cross browser debugging
I came across an article on css cross browser debugging, and few points stood out. Often there will be discrepancies between browsers, this can be frustrating but its evident that you are most likely working against css. To solve these issues, the article provides a few good points which ill cover:
1) browsers do things differently: not keeping to standards, will produce different results per browser.
2) did you use a css reset? Letting the browser default styles dictate can cause issues. Use something like the popular Eric meyer reset to normalise the browser.
3) css3 support: use tools like html5test.com to view browser support.
4) margin traps incorrectly: unexpected spaces in the display can be due to collapsing margins. These occur when vertical margins of 2 elements touch each other, the largest margin value overrides the other (this margin actually sets to zero). Refer to http://reference.sitepoint.com/css/collapsingmargins for more detailed information.
5) combining display types: doing so leaves the developer susceptible to potential bugs.
Also discussed in the article is css display and position properties. Each display type has a ‘tool box’ (such as using margins on block level elements, and line height on inline) using appropriate properties will improve cross browser discrepancies.