Cross Browser css hacks that every designer and developer should know

In this post I am going to write about a big problem that every developer or designer face. Cross browser compatibility problem. The css hacks I am going to show are not always validated by w3c but in certain situations they are lifesavers. The browsers I am going to cover are IE, firefox, chrome, safari and opera.

First I am starting with notorious IE . Most of the time designer or a developer finds that all the browsers are showing the design perfectly, except IE. Even Different versions of IE are showing different types of design bugs. The easiest way is to make different css for different IE and call them seperately in page. The example are

<!–[if IE 8]> <link rel="stylesheet" type="text/css” href=”css/ie8.css”><![endif]–> <!–[endif]–><!–[if IE 8]> <link rel=”stylesheet” type=”text/css”  href=”css/ie8.css”><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” type=”text/css”  href=”ie7.css”><![endif]–>
<!–[if IE 6]><link rel=”stylesheet” type=”text/css”  href=”ie6.css”><![endif]–>

Firstly our normal css will load then these conditional css will load and will overwrite the default css classe, which are common in those conditional css files.

Now if we have a single css and we want to apply css hacks in that file only.

IE6

.myhack{width:100px; _width:110px;}

IE7

.myhack{width:100px;#width:110px;}

IE8

.myhack{width:100px;width:110px/}

Chrome and Safary

@media screen and (-webkit-min-device-pixel-ratio:0) {

.myhack { background-color: #FF0000; }
#myId {color: #0000FF;}
}
Firefox
@-moz-document url-prefix() {
.myhack{width:100px; }
}


Advertisements

One response to this post.

  1. Posted by lucasbytegenius on November 25, 2011 at 7:54 pm

    Really helped me 🙂 Thanks.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: