Why does my site render differently on Windows than on Mac, irrespective of browser or version?

Question

(Images, from top: Chrome 25 Mac, Chrome 23 Windows, FF 19 Mac, FF 19 Windows, IE 8)

According to browsershots.org, my site renders the way I want it to look when using each of the currently major Mac OS X browsers— Firefox 18-19, Chrome 23-25, and Safari 5-6. But on Windows each of these same browsers, including IE8 and Opera 12, do not display like their Mac counterparts, and they all seem to display in the nearly identical "wrong" way, which is that menu item font-size is either misinterpreted or overridden— since they all display the same I think this must not be a browser incompatibilty but a system one.

What is causing this, and how and where do I create a system specific hack? I'm a rank amateur and don't know a lot about this; I know for sure that one thing that probably isn't done correctly is the clumsy way I've forced the search form into the navigation bar… it was the only way I could make a menu search form work for the Wordpress thematic theme. I feel like it isn't properly classed, but I don't understand these things.

TL;DR: All major browsers display site the same on a given platform, but site doesn't appear the same across different platforms.

Some hopefully relevant css:

#access,.menu a,.current_page_item {
    display: compact;
    border: none;
    font-size: 30px;
    font-family: 'ChopinScriptRegular', Palatino, Helvetica !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1px;   
}

/*Search form*/
#searchform{
    border: none;
}
#searchform input{
    font-family: 'ChopinScriptRegular', Palatino, Helvetica;
    font-size: 30px;
    border: none;
}
::-webkit-input-placeholder {
    color: #666;
    padding-top: 9px;
}
:-moz-placeholder { /* Firefox 18- */
    color: #666;
    padding-bottom: 2px;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #666;
    padding-bottom: 2px;
}
:-ms-input-placeholder {  
    color: #666;
}
input, select {
    width: 135px;
    height: 50px;
    border: none;
    background: none !important;    /* menubg search hover, see default.css*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.widget_search .screen-reader-text{
    display: none;
}
/*FF*/
@-moz-document url-prefix() {
    input, select {position: relative; bottom: 2px;}
}
/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input, select {position: relative; bottom: 5px;}
}

/*end*/

Answer 1

Here's your culprit:

.windows .sf-menu a {
  font-size: 12px;
}

On line 168 of styles.css

You're setting a default size for those anchor links, but it isn't being applied to the input element (Search). That's why they're all wonky in Windows. It's not being applied to the Mac browsers.

Answer 2

As said by @user2019515, your more than likely using fonts that are not available in OSX, use one of:

1. standard fonts such as font-family: Arial, Helvetica, sans-serif;
2. Google Web Fonts http://www.google.com/webfonts
3. Cufon http://cufon.shoqolate.com/generate/ (renders font perfectly every time regardless of OS or browser)

Answer 3

Most probably you're using a font which is only available on Windows but not on Mac, you should specify a few different fonts like so:

font-family: Arial, Helvetica, sans-serif;