Font rendering on Mac VS. PC

I am using CSS to create a webpage and I noticed Mac(Safari) renders the font wider and thicker than PC(Other browsers).

I have ten categories displaying in horizontally with fixed width size of 960px开发者_StackOverflow社区. I used padding to have some space in between each categories and it looked great on PC, but when I saw it on Mac using Safari, it created two lines because of wider font rendering. I know there is a way to hack IE, but with Safari.

What's the best way to display correctly on Safari and other browsers?

Since writing CSS around the subtleties of cross platform font rendering is very difficult, I'd recommend something such as variable padding.

ul {
   display: table;
   width: 100%;
}

ul li {
   display: table-cell;
}

jsFiddle.

You choose a font size that works across the platforms you are testing, and let the display: table-cell calculate the padding.

If you want to guarantee that your category boxes don't span two lines you must fix the width of the boxes so they always add up to exactly 960px.

For instance:

<div class="container">
  <div class="category">...</div>
  ...(9 more)...
  </div>
<div>

.container { width: 960px; margin: 0 auto; }
.category { width: 86px; padding: 5px; float:left; }

You'll just have to adjust that to fit the look and feel you want. You're not going to get perfectly consistent rendering of text across all browsers and platforms unless the text is actually an image, so you just need to account for that by defining the boxes that text fits into how you want it to layout on the page.