CSS only for safari by browser detection

I've been facing a problem since last few months, which is css only for safari, I've used @media screen and (-webkit-min-device-pixel-ratio:0){ } for safari, but it works for chrome and safari both, that's why, where some content is perfect in chrome but not in safari ( For example in safari the button contain extra space), So it is not a good idea to use -webkit! I've tried for any specific hack, but still I can't manage a single hack to distinguish chrome and safari.

Now I’m using jQuery to distinguish chrome and safari and include a css file (For example safari.css) as
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();

// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
chrome: /chrome/.test( userAgent ),
safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
if(jQuery.browser.safari){
document.write('<link rel="stylesheet" type="text/css" href="css/safari.css" />');
}
</script>

Here It is must to define chrome and safari separately, because chrome and safari both use the webkit. By default if we don't define for chrome, then jQuery.browser.safari is true for both safari and chrome.

Which is working nicely.