The new Google Chrome web browser, uses the Apple WebKit engine for displaying its pages – which in turn is used to display pages in Safari. Webkit was built on the Konqueror browser on Linux.

Pages don’t render 100% exactly the same on these browsers compared to Firefox, Opera and Internet Explorer – treat it as a completly new browser with its own quirks. Mainly pages render fine but tend to fail when positioning textual elements, as well as differences in the way padding works. Its weird, but you will see tiny errors which will bug the hell out of you in Chrome / Safari but don’t know how to fix.

Enter the Safari hack – shake this baby into line for we’ve got a hack coming and its not easy to remember, so best copy and paste this in your notebook for future reference (or bookmark this page).

Say you’ve got a class yourclass and you want to alter what happens in safari, its not playing ball, this is what you do:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
/**/

You can add additional elements within the comments to save your sanity:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
html>body*.yourborderclass {border-width:10px;}
html>body*.yourotherclass {padding:10px;}
/**/

Thats all for now, i hope it saves your sanity like it did mine, its not easy work hacking css, a designers life is not the easiest but this should help!