Google Chrome - Differences between Mac and PC Google Chrome - Differences between Mac and PC windows windows

Google Chrome - Differences between Mac and PC


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.