Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#31309 closed Bug (needsinfo)

Django admin site needs X-UA-Compatible meta tag to prevent IE rendering the page poorly in compatibility mode.

Reported by: Petter Strandmark Owned by: nobody
Component: contrib.admin Version: 3.0
Severity: Normal Keywords:
Cc: Carsten Fuchs Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

Django admin site needs X-UA-Compatible meta tag to prevent IE rendering the page poorly in compatibility mode.

The fix is simple, just add <meta http-equiv="X-UA-Compatible" content="IE=11" /> to the base template. I'll make a PR for this.

It's pretty annoying without this, CSS can break and the pages look generally poor.

Change History (8)

comment:1 by Carlton Gibson, 5 years ago

Resolution: → wontfix
Status: new → closed

​As per Microsoft's advice we use the HTML5 document type: <!DOCTYPE html>. Document modes have been deprecated since 2013 and "should not be used".

If you want this you can create your own admin/base.html, as per the ​Overriding templates docs.

Give it the following content to add the meta tag to the existing block: 

{% extends 'admin/base.html' %}

{% block extrahead %}
<meta http-equiv="X-UA-Compatible" content="IE=11" />
{% endblock %}

comment:2 by Petter Strandmark, 5 years ago

Resolution: wontfix
Status: closed → new

No that does not work, unfortunately, since the X-UA-Compatible tag needs to come before the stylesheets.

I don't know about Microsoft's advice, but this change fixes real issues with the latest IE.

Last edited 5 years ago by Petter Strandmark (previous) (diff)

comment:3 by Petter Strandmark, 5 years ago

Resolution: → wontfix
Status: new → closed

comment:4 by Petter Strandmark, 5 years ago

Resolution: wontfix
Status: closed → new

From the documentation:

"The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements."

comment:5 by Carlton Gibson, 5 years ago

Resolution: → needsinfo
Status: new → closed

... the X-UA-Compatible tag needs to come before the stylesheets.

There's no block for that. Possibly we could add a block but I go back to MS's docs saying that the tag shouldn't be used.

Ref #31032 here: it's not clear that IE is still supported (vs Edge). Maybe an email to the DevelopersMailingList is appropriate to clarify the situation.

comment:6 by Carlton Gibson, 5 years ago

You've target IE11 ​but, the MS Docs again:

Starting with IE11, document modes are deprecated and should no longer be used.

You may need to narrow down exactly what CSS elements aren't working. Maybe those can be addressed but removing features for a previous generation browser isn't likely to win friends.

Given Claude's comment on #31032

...especially since the responsive patch

Have you tried overriding the responsive block in admin/base.html? Maybe removing those stylesheets is enough to simplify it?

(TBH using Edge seems the best option here.)

Version 0, edited 5 years ago by Carlton Gibson (next)

comment:7 by Carlton Gibson, 5 years ago

Hi Peter.

If you can prepare some more details on the problems we can look at whether we can (and want) to address them.

Thanks.

comment:8 by Carsten Fuchs, 4 years ago

Cc: Carsten Fuchs added

To my understanding, the IE can be set, per policy, to render all intranet pages in "compatibility mode" (IE7?), which seems to cause problems with modern CSS.
In my tests,

<meta http-equiv="X-UA-Compatible" content="IE=edge">

fixes the problem.
​https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do has a lot of information about this.

Note: See TracTickets for help on using tickets.
Back to Top