Nov
14
2009

CSS Hack for Safari and Google Chrome

Posted by Asela de Saram in Browsers, CSS, CSS Hacks, Tips and Tricks

One day I was coding this site and found that the elements aligned perfectly except for this annoying 1px difference that appeared only in Safari and Google Chrome. So after many hours of Googling and lots of Coffee, I foung this online.

This was my mis-behaving code:

#rightmasthead, #leftmasthead {
float:right;
text-align: right;
margin: 33px 0;
padding: 10px 15px 0 0;
border:0px solid #000;
width: 300px;
}

Personally, I try to avoid using CSS hacks, and when writing client code I always assume that anything can be done the “proper” way.

However, in most cases a hack is useful and needed, so here are two hacks (which are, in fact a valid CSS) that can be used to target and distinguish Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#rightmasthead, #leftmasthead {
margin: 32px 0; /* This works only in Safari and Google Chrome */
}
}

Viola it works now perfectly!

If you enjoyed reading this post then please consider subscribing to my full RSS feed.

{ 8 Comments }

8 Responses to “CSS Hack for Safari and Google Chrome”

  1. ivan2k2 Says:
    November 30th, 2009 at 7:54 am

    Dear Author http://www.crystalaxis.com !
    Good gradually.

  2. Riddhi Says:
    October 17th, 2010 at 3:32 pm

    great work dude… I had applied lots of chrome css and no one worked out… :( finally I got my solution in this site.. keep it up…

  3. Darlene Smith Says:
    November 13th, 2010 at 3:29 am

    Hi,

    I have the same problem but I am only a beginner and I am not understanding it, here is my css:

    .header_bg {
    position: relative;
    top: -166px;
    left: 590px;

    I have problem in top: -166px; it should be
    top:-163px; to make it right in both safari and google chrome. but -166px for firefox and explorer.
    How would I write it using this hack?
    Thank you in advance for your help.

    Darlene

  4. Asela de Saram Says:
    November 13th, 2010 at 11:11 am

    Hi Darlene,

    As a general rule, CSS hacks should be used only as a last resort. If you can send me the URL and/or the css, html files to my email address asela [at] crystalaxis [dot] com I shall take a look and let you know. I’m sure its something really small that needs to be adjusted.

    - Asela

  5. Jeff Says:
    November 16th, 2010 at 7:22 am

    I’ve been searching high and low for a Safari/Chrome hack. This was literally my last resort. Now the site I’ve been working on for the last week is cross-browser compatible. Thanks a million!

  6. Raghibsuleman Says:
    December 22nd, 2010 at 11:24 am

    thanks for this css hacks solution

  7. HERP DERP Says:
    June 16th, 2011 at 2:50 am

    Worked perfectly…saved me a good couple of hours. Much appreciated.

  8. Rahul Says:
    August 7th, 2011 at 2:21 pm

    Great help buddy….
    I found the solution here and its working perfectly.
    Thanks for sharing us.

Leave a Reply