Cross Browser Debugging between Firefox and Safari (or Chrome)

Question

I've noticed that Safari and Chrome behave the same when it comes to HTML and CSS. However, there are differences between Firefox and Safari (and hence, Chrome as well).

Sometimes things can look great in Firefox, but the CSS misbehaves in Safari and Chrome. The cause of the mis-behaviour can be attributed to "anything" (as opposed to in IE 6 and 7, mis-behaviours are usually caused by excessive paddings/margins that cause elements to float out of position). For example, while debugging CSS of a website for Safari the following attributes have caused cross-browser misbehaviours:

• position
• height
• width
• padding
• margin

Is there a common pattern to Chrome and Safari CSS debugging?

Can you guys offer insight into the differences between Safari and Firefox that may help me with my cross browser debugging? Thanks

Answer 1

I have noticed differences, but not that dramatic. As usual, most differences can easily be overcome / avoided by using a css-reset. Do you use one on the pages you are talking about?

Answer 2

Typically, and anecdotally, the majority of large differences between cross-browser rendering of the same page are due to:

• invalid (x)html, use the on-line html validator from the W3 to ensure the validity of the mark-up.
• lack of establishing a base-line for CSS (as @Jeroen suggests: use a css reset).
• use of CSS which varies in support from browser-to-browser, particularly the newer CSS 3 (transitions, column-count and box-reflect¹ particularly, though there are many, many others).

---

1. This may, or may not be, a proposal for inclusion in CSS3 by the World Wide Web Consortium, the only references I've found for it are exclusively with the -webkit vendor prefix, which suggests that it's probably a proprietary extension. I can, however, hope that others will follow suit. It's so much easier to apply reflections with css than with js/php...