Clever Geek Handbook

Apply different browser based CSS width property? (IE8, FF)

I need to apply width to div. The width value must be changed in the browser. I am unable to apply the conditional css. So there could be any hack for this.

FF

.apply{
    width: 720px; 
}

IE8

.apply{
    width: 690px; 
}

Is it possible to combine them with some kind of hack so that the corresponding properties are applied automatically according to the browser.

+3


source to share


4 answers


For Firefox and IE:

In CSS:

@-moz-document url-prefix() {
    //Firefox-specific CSS here.
}


In HTML:

<!--[if IE 8]>
    <style type="text/css">
        //IE8-specific CSS here.
    </style>
<![endif]-->
+7


source


For IE8 and below:

.apply{
    width: 690px\9; 
}


I found this link, I hope it is helpful to you.

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

+1


source


Is the width for FF different from other browsers? (excluding IE, of course). If not, set for your CSS:

.apply {width: 720px;}

For IE8, use conditional statements in HTML.

<!--[if IE 8]><style type=text/css>.apply {width: 690px;}</style><![endif]-->
0


source


Apply browser based CSS classes like FF and IE and IE Edge. Use below example css code.

/* This is for Firefox Browser */
  @-moz-document url-prefix() {    
    .divColor {
            color: red;
    }
} 

/* This is for IE Browser  */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {    
    .divColor {
            color: blue;
    }  
} 

/* This is for IE Edge Browser */
@supports (-ms-ime-align:auto) {
    .divColor {
            color: green;
    }  
}
0


source






More articles:


All Articles