Add CSS rules for IE only in Sharepoint

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/285998

  •  17-02-2021
  •  | 
  •  

Question

I'm having an issue with a css rule for IE that I need to write it properly in Sharepoint master page in order to be taken into consideration on page load in IE browser. The way I wrote the rule in the head of page, doesn't seem to be working for IE.

What I am doing wrong?

<head id="Head1" runat="server">
     <meta http-equiv="X-UA-Compatible" content="IE=10"/>
    <!--[if IE]>
        <style type="text/css">
            #image{
                position: relative;
            }
            .image-link {
                background: url("/someimages/somedirectory/sometransparentpixel.png") 0 0 repeat;
                margin-top: 10px;
            }
        </style>
    <![endif]-->
Was it helpful?

Solution

If you are using the IE 10+ version, please use pure CSS like this:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
   /* IE10 and IE11-specific styles go here */
}
@media screen and (min-width:0\0)
{
    /* IE9 and IE10 rule sets go here */
}

More information for your reference:

Adding CSS file for IE

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top