English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroatian flagDanish flagFinnish flagHindi flagPolish flagRomanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flagBelarus flagIrish flagIcelandic flagMacedonian flagMalay flagPersian flag

Chrome / Safari Specific Stylesheet CSS Hack and Classes


So, I was working with the login-with-ajax wordpress plugin, When I noticed that it displays differently in chrome. I was blown away that firefox and internet explorer would both show the appropriate  css styling and that chrome should some entirely different placing of the div via css.

So what I needed was a way to have two different style classes for each browser set..

So I did some research and found that we can use the webkit difference of chrome and safari to firefox and IE. So, if you want a chrome/safari specific css style override just frame it in the below code, and drop it in below the old line# in your stylesheet.

{code type=css}
#div1 {old rules for:IE,Firefox;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#div1 {new rules for:Chrome,Safari;}
}
{/code}


2 Comments

  1. Thanks so much for this! I was looking around for a while to find a solution. You rock.

  2. Its very useful for me…It saves my time