CODEWITHSUNDEEP
windowsmacoshtmlcss
Naftuli Kay
Naftuli Kay

Reputation: 91740

1 pixel vertical discrepancy between text on OSX and Windows

I have a pretty simple button that is marked up like this:

<a href="#" class="common_cta buttons send_inquiry">
    <span>Back to homepage</span>
</a>

The computed style of the <a> element looks like this: http://pastebin.com/u9q6BDHx

The computed style of the <span> looks like this: http://pastebin.com/P9mR7yHF

Here's what it looks like in comparison, Windows vs. OSX:

enter image description here

As you can see, there's a one pixel discrepancy between Windows and everything else. The designers are requiring that this be a pixel-perfect implementation and I have no idea how to fix the problem specifically for OSX.

How can I fix this?

Upvotes: 2

Views: 258

Answers (1)

Lazerblade
Lazerblade

Reputation: 1127

oYou're going to find that every browser will differ at least slightly in how it handles CSS. For instance, my company's website uses some crazy SEO "tricks" to get sections higher in the page as viewed by Goggle vs. where a user sees the info. As a result, some of the CSS I write requires browser-specific tweaks.

I believe what you're looking for is something along the lines of the following, allowing individual styles per browser to be used:

.win.ie .buttons {padding:3px 5px;}
.mac.gecko .buttons {padding:4px 5px;}
.chrome .buttons {padding:4px 6px;}
.win.gecko .buttons{padding:4x 6px;}

Upvotes: 2

Related Questions