explicitly defining Margin in chrome

Question

I have a div on a page, the buttons on other browsers are neatly placed but on chrome, they are falling down. I am aware of explicit hacks for IE 7 which is like *Margin, but not aware about chrome.Is there a way to define in css. i dont want conditional statements to deal with this.I need to explicitly mention margin in negative pixels for chrome to pull the buttons up.

Answer 1

This jQuery should add class="chrome" to the html element of your document.

$(document).ready(function(){
 if (navigator.userAgent.indexOf('Mac OS X') != -1) {
      if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
 } else {

      if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
 }
});

You can then target the div like so:

.div {
 margin-bottom: 10px;
}
html.chrome .div {
     margin-bottom: 20px;
}

Answer 2

this worked like a charm

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */
.act .now {
    margin: -14%  auto 0px;

}

/* Safari only override */
::i-block-chrome,.act .now {
    margin: 5% auto 0px;
}}