Browser specific CSS

Sometimes the same css class renders differently in different browser. For example you have put padding-left:5px in your css class. But in different browsers the padding is showing different. So one workaround may be to use different css class or css class attribute in different browser. Consider the following css class.

 

.rightColForCheckBox

{

      float: left;

      padding-left: 2px; /* Default*/

      *padding-left:0px; /* This is for ie7 and hopefully ie8.*/

      _padding-left:0px; /* This is for ie6*/

}

 

The css class rightColForCheckBox has three attributes for padding-left each of for different browser that is described below:

*padding-left: This is for ie7 and hopefully ie8

_padding-left: This is for ie6

padding-left: This is default for browsers for which no specific css specified.

 

If we need safari specific css class then declare the same rightColForCheckBox again in the following manner:

 

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

.rightColForCheckBox

{

      float: left;

      padding-left: 5px;

}/* This code is only recognize by safari*/

}

 

Although writing css class in this way is not recommended, this is the last way to get rid of the css comparability issue.