During my recent project working on the redesign of Spencer Day's promotional site, I encountered a maddening cross-browser quirk. A critical component of online marketing is email newsletters, and part of the site redesign was heavily customized sign-up form. After some work, I had a pretty nice looking form that appeared nearly identical in Firefox, Chrome and IE:

Safari, on the other hand looked TERRIBLE:

It was generated by the following CSS:

/* Mailing list form */
#mc_embed_signup {
     position: relative;
     height: 32px;
}

#mc_embed_signup form label {
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7);
     border-radius: 5px 0px 0px 5px;
     color: silver;
     position: absolute;
     left: 0px;
     top: 0px;
     width: 185px;
     height: 29px;
     padding-left: 10px;
     padding-top: 0px;
     padding-bottom: 0px;
     vertical-align: 10%;
     font-size: 15px;
     line-height: 29px;
     font-weight: bold;
}

#mc_embed_signup form input#mce-EMAIL {
     position: absolute;
     top: 0px;
     width: 285px;
     height: 28px;
     left: 195px;
     padding-left: 5px;
     padding-bottom: 0px;
     padding-top: 0px;
     font-size: 15px;
     border:0px;
}

form input.button {
     color: #555;
     position: absolute;
     right: 67px;
     top: 0px;
     height: 28px;
     padding-top: 0px;
     padding-bottom: 0px;
     font-size: 15px;
}

It's always frustrating when one Webkit browser (Safari) doesn't even look like another Webkit browser (Chrome). In this case it's clear that Safari ignores the styling provided in form input.button part of the CSS. It took some serious searching to figure out why, but I did. Apple doesn't allow the styling of "native" buttons. To get a button to be accepted as "non-native", you can add a background color (even the same color currently in use).

form input.button {
     background: #ccc; /*without this, safari ignores styling*/
     color: #555;
     position: absolute;
     right: 67px;
     top: 0px;
     height: 28px;
     padding-top: 0px;
     padding-bottom: 0px;
     font-size: 15px;
}

Now the signup form is roughly* the same across all major browsers:

*sloppy screen-shot snipping aside