Bootstrap Glyphicons icons not rendering in IE on

问题:

I create this question to share my recent knowledge of a weird IE behaviour.

An intranet web application (ASP.NET) is under construction by myself and some Glyphicons are on a page. When I run the website on localhost, using Visual Studio, no problem appear.

But when I deploy it on the IIS server, icons was not rendering anymore.

Situation 1: on the server

Situation 2: on localhost

This problem only appear in IE (v. 8 here) when viewing it on the server. Firefox and Chrome work properly, rendering the icons in both server and localhost case.

I search and find many possible solutions (MIME types, fonts format, eso) but nothing resolve the problem.

回答1:

If you want to solve this problem without having your user make any modification, you would have to add new HTTP Response Header in the IIS. Here are steps to do so:

1. Open up IIS
2. Click on HTTP Response Headers
3. Add a setting with Name: "X-UA-Compatible" and Value: "IE=Edge"
4. Done

Make sure you ask user to clear the cache and restart the browser (pretty important step).

回答2:

Had same issue fixed it by adding web.config after </system.web> tag

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=EDGE" />
      </customHeaders>
    </httpProtocol>    
  </system.webServer>

回答3:

After nearly one hour, I found where was the problem.

In Internet Explorer, under the "Compatibility View Settings", was checked the "Display intranet sites in Compatibility View" option.

When I unchecked it, the icons appears like expected.

So, don't forget to check "compatibility view" settings before everything else...