In the past, I've seen nearly no difference between CSS in the same browsers on different platforms- pages on Safari on Mac usually look identical to Safari on Windows (and same with FF-Win vs FF-Mac). However, now I'm having an issue where both Mac browsers are pushing some elements off by a pixel compared to their PC counterparts.
Is there a way to select a browser on a specific OS to apply CSS to? Maybe something like conditional stylesheets, only for operating systems instead of browsers?
I don't know of any CSS-specific tricks, but you could select stylesheets to load with Javascript. You can use navigator.appVersion to get the OS type, along with more info.
For instance, I get:
5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/532.5+ (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
It's quite possible. The most common approach (that many JS frameworks take) is to first do platform/browser detection based on UA string and/or existence of known JS objects/methods. Then, they usually apply a platform/browser CSS class to the <head> or <body> so that you can write rules like:
.gecko2.mac .specialRule {
// whatever
}
Probably a bit of a challenge to roll this approach from scratch, but certainly possible (especially if you only care about certain combinations).