All geek questions in one place

IE9 in compatibility mode does not display CSS styles correctly

I have a nested div (see below) that have different CSS classes to give the background color for the container and format for the text

<div class="section"> <div class="sectionTitle"> <dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='<%# Eval("SectionTitle") %>'></dx:ASPxLabel> </div> <div class="sectionTitle"> <dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='<%# Eval("SectionDescription") %>'></dx:ASPxLabel> </div>

There is a private tag for the div section, there is more content that displays correctly.

CSS for above:

 .section { padding: 5px; background-color: #ffffff; } .sectionTitle { font-size: 11px; font-family: Arial; font-weight: bold; color: #546fb2; }

When I comment on the background color in the .s section, sectionTitle formatting is applied, but when I put the background color in it, it overwrites the color of the sectionTitle. I tried setting the .section color to match the .sectionTitle, but this still does not work.

It works fine in every browser (not compatible with IE9, Firefox, Chrome), and I have been looking at it for a couple of hours, which is a little frustrating because I can not determine the problem.

The content is on an ASP.NET page that uses MasterPage, which has a doctype:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Can someone help shed some light on this, please?

Thanks in advance

Andy

+6
source share
2 answers

Internet Explorer has a compatibility feature, where it always displays sites on the local network in compatibility mode. You must explicitly disable this in one of two ways.

 <meta http-equiv="x-ua-compatible" content="ie=edge" />

This edge marker indicates that it always displays the most standard mode that it supports.

Another method (which I prefer) is used if you use server-side technology, for example asp.net or php, which should add an HTTP header (in asp.net this happens in global.asax, also chrome = 1 allows you to set a chrome frame ):

 protected void Application_BeginRequest() { Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1"); }

EDIT:

There is also a third way and disable it on the compatibility view tab in Internet Options. This only affects your computer.

In addition, it is better to use the header method, if at all possible, rather than the meta tag method. By the time the browser has read the meta tag, it already has the main mode in it. The meta tag only affects the rendering mode of the document, and not the browser compatibility mode. There is a subtle difference that may in some cases have an effect.

+13
source

try adding this to the title

  <meta http-equiv="x-ua-compatible" content="ie=emulateie9" />

Press F12 on IE9, and if there is Qirks document mode, you should fix it with meta tags. Perhaps this is your problem.

0
source

Source: https://habr.com/ru/post/910329/

More articles:


All Articles