Question

I’m developing a website for a customer, and I’ve tested it with the major browsers on Windows.

Now I’m facing some little differences between Chrome Win and Chrome Mac (same version).
These are really minor things, but the customer spotted them, so I’m wonder.. there is some reset I can do via css to make the two version as similar as possible?

I think I’ve to work with the -webkit prefix of the browser default, do you know any good walkthrough?

I mean: there is some base .css I could use to reset Chrome and to force it to render as similar as possible even cross-platform?

Thanks!

UPDATE: the differences I mention involves mainly font-sizes letterspacing and something related with the height and line-height of the elements.

Answer 1

What you’re running into is default browser css definitions. It’s always a good idea to reset or normalize your CSS when starting a project so all browsers behave the same way with the base elements.

http://meyerweb.com/eric/tools/css/reset/ << reset. Sets all common CSS to 0. This one can be difficult to use since it means styling EVERY element you want to use. ie lists no longer have any default padding or list style.

http://necolas.github.com/normalize.css/ << Normalize gives you some default settings, but still tries to bring all modern browsers to the same starting point.

When it comes to prefixes really only some of the CSS attributes use them. There is a good explanation here: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

List of which browsers use which prefix:

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

Also keep in mind some CSS properties need to be defined differently for older versions of IE using filters. Opacity is one of those.