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;
}
}
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?
my content goes down in chrome and works fine in other browser please provide any hack
‘Chrome and Safari CSS hack’ simply doesn’t work!
I’ve checked and it is still working with latest versions. Check your stylesheet.
is that there are no haks css for google chrome version 8
if we put the hack in .css file .. will it resolve the chrome layout issue ??? anybody.. pls help..
dont work
@-moz-document url-prefix() {
.metro .PayAccountCredit .btn {
margin-top:-23px;
}
}
Chrome and Safari hack working perfect for me 🙂
Thanks!
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
When I try to use the chrome and safari hack I different kind of changes in safarai and chrome.Really disappointed….
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.
Thanks
works great, thx!
The Chrome hack was exactly what I needed. Thank you!
::i-block-chrome is working fine for me,is there anything to block mozilla browser?
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!
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?
Sorry, don’t have a Mac, so can’t really test.
Hi, I have problem in Mac safari, but in Windows safari design look perfect,
any solution plz…. Mac safari latest version is 9.
Chrome v.55 CSS hack’ simply doesn’t work!