CSS Browser Hacks

CSS hacks are needed in order to solve problems caused by different browsers rendering. It’s often getting down to solve problems with Internet Explorer, especially version 6 and 7. But I stopped to care about IE6 already ๐Ÿ™‚ No more!

So the main problem is Internet Explorer. But we have this CSS code to dominate:

/* for IE6 */ 
*html .someClass {
color:red
} 

/* for IE7 */ 
*:first-child + html .someClass {
color:red
} 

/* inline IE7 CSS */ 
.someElement {    
color:blue; /* all browsers */    
*color:red 
} 

/* inline IE8 CSS */ 
.someElement {   
color:crimson; /* all browsers */   
color:black\0/; /* IE 8 & 9 */ 
} 

/* IE9 CSS - doesn't work with background */ 
:root .someElement { 
color:green\0/IE9; 
}  

/* IE9 */ 
/* IE9 Media Query, works well with background, doesn't affect IE10 and later */ 

@media all and (min-width:0\0) and (min-resolution: .001dpcm) {  
select { 
background:#f6f6f6;     
padding-right:0;  
}
} 

/* IE 9, 10 & 11 */ 
@media screen and (min-width:0\0) {  
.someElement { 
font-weight: bold; text-decoration: underline; display: inline; } 
}

/* MS Edge */
@supports (-ms-ime-align:auto) {
body {
direction:ltr;
}
header, main, footer {
 direction: rtl;
}
} 

Firefox Only CSS Hack

/* FireFox 3 and Up */ 
html>/**/body .someClass, x:-moz-any-link, x:default {
left:1em !important
}

Chrome and Safari CSS hack:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.someElement {
margin:1em
} 
}

Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering. Safari for windows gets less updates.  Finally there is a way to separate them in CSS.

@media screen and (-webkit-min-device-pixel-ratio:0) {      
/* Safari and Chrome, if Chrome rule needed */     
.someClass {      
color:#c00;     
}     

/* Safari 5+ ONLY */     
::i-block-chrome, .someClass {      
color:#000;     
}
}

Share:

21 Responses to CSS Browser Hacks

  1. dinonet says:

    When I try to use the chrome hack I can’t see any changes. Am I doing something wrong? I add the above to the css and then use that class somewhere in the code right?

  2. syed says:

    my content goes down in chrome and works fine in other browser please provide any hack

  3. disappointed says:

    ‘Chrome and Safari CSS hack’ simply doesn’t work!

  4. ahmed says:

    is that there are no haks css for google chrome version 8

  5. Bilal says:

    if we put the hack in .css file .. will it resolve the chrome layout issue ??? anybody.. pls help..

  6. Zain says:

    @-moz-document url-prefix() {

    .metro .PayAccountCredit .btn {
    margin-top:-23px;
    }
    }

  7. Sebastian says:

    Chrome and Safari hack working perfect for me ๐Ÿ™‚
    Thanks!

  8. Punit says:

    this not working ::i-block-chrome for blocking issue of chrom or safari both.
    all code working in both browser so how can i fix that type of issue in my site?

    thanks

  9. Jayanth says:

    When I try to use the chrome and safari hack I different kind of changes in safarai and chrome.Really disappointed….

  10. The Chrome and Safari hack targets Safari 5.1-6.0 and Chrome 10-24. Nothing else. The media query around it simply guarantees that it is ‘either Safari or Chrome’ so at least that part will remain accurate. At the time that hack was released, newer versions that could not work were not created yet. Newer versions of Safari and Chrome can be targeted and separated. I have been working on many more – check my blog or my test page for more: Live Test Page For CSS Hacks — I have been keeping it updated. For others, and different types of hacks, check out BrowserHacks.com as well – I have been providing hacks as well as testing for them.

  11. Dharmendra says:

    Thanks

  12. Dan says:

    The Chrome hack was exactly what I needed. Thank you!

  13. san says:

    ::i-block-chrome is working fine for me,is there anything to block mozilla browser?

  14. Greatful says:

    Wonderful thank you for the Safari only hack! It worked like a charm. That code that allows you to add styles to both Safari & Chrome and only Safari is amazing. Thank you!

  15. The safari hack doesn’t work for me. I’m trying to target only Safari 5+:

    /* Safari only override */
    /* Safari 5+ ONLY */

    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    ::i-block-chrome, .myClass {margin-top:5px;}
    }

    What am I doing wrong?

  16. Minhaj Alam says:

    Hi, I have problem in Mac safari, but in Windows safari design look perfect,
    any solution plz…. Mac safari latest version is 9.

  17. Chrome v.55 CSS hackโ€™ simply doesnโ€™t work!

Leave a Reply

Your email address will not be published. Required fields are marked *