CSS Hacks

Fix Browser Styles – CSS hacks for Firefox, Chrome, Safari and IE

With the advancement of technology, Web browsers plays a central role. Web browsers made it easier for making a connection with World. It is also very important for each website to look perfect on all modern browsers. I was working on a project few days ago & I got some browser based style bugs. It was very annoying because my stylesheet was working fine on some browsers. I got some incompatibility issues only on one Internet browsers so I tried some CSS Hacks.

I spent few hours for finding the right solution. Finally, I found the solution and used the media queries to target the specific browsers. It’s an amazing solution that helped me to make my project look perfect on all modern browsers. I’ve complied these below codes to help other people.

Browser Fixes:

We can use below mentioned CSS Hacks to target all modern Web Browsers.

Firefox Only CSS Hack

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

Internet Explorer CSS Hacks:

/* 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;
    }
}

Chrome and Safari CSS Hack:

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

Leave a Reply

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

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.