IE9 en modo de compatibilidad no exhiben los estilos CSS correctamente

que tienen un div anidado (véase más adelante), que tienen diferentes clases CSS para dar un color de fondo del contenedor y un formato para el textoIE9 en modo de compatibilidad no exhiben los estilos CSS correctamente

<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>

Hay una etiqueta de cierre para la sección div, hay más contenido allí que se representa correctamente.

El CSS para lo anterior es:

.section 
{ 
    padding: 5px; 
    background-color: #ffffff; 
} 

.sectionTitle 
{ 
    font-size: 11px; 
    font-family: Arial; 
    font-weight: bold; 
    color: #546fb2; 
}

Cuando comento hacia fuera el color de fondo en .Sección se está aplicando el formato de sectionTitle pero cuando pongo el color de fondo en la que hay que sobrescribe el color de la sección Título. He intentado configurar el color de .section para que coincida con .sectionTitle, pero esto todavía no funciona.

En todos los navegadores (IE9 no compatibles, Firefox, Chrome) funciona bien y he estado viendo esto durante un par de horas, lo cual es un poco frustrante ya que no puedo detectar el problema.

El contenido está en una página ASP.NET que utiliza un MasterPage que tiene el tipo de documento:

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

¿Alguien puede ayudar a arrojar algo de luz sobre esto, por favor?

Gracias de antemano

Andy

Fuente

2012-03-09 anD666

¿Revisaste las dos clases con la misma propiedad? – krish

Internet Explorer tiene una "característica" de compatibilidad donde siempre muestra los sitios que están en la red local en modo de compatibilidad. Tienes que desactivar esto explícitamente en una de dos formas.

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

Este marcador de borde dice, es decir, siempre se procesa en su modo más estándar que admite.

El otro método (que prefiero) se utiliza si está utilizando una tecnología del lado del servidor como asp.net o php, que es para agregar un encabezado http (en asp.net esto va en global.asax, también el cromo = 1 permite chromeframe si está instalado):

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

EDIT:

también hay un tercer camino, y eso es desactivarlo en la pestaña vista de compatibilidad en Opciones de Internet. Esto solo afecta tu computadora, sin embargo.

Además, es mejor utilizar el método de encabezado si es posible, en lugar del método de metaetiqueta. Para cuando el navegador ha leído la metaetiqueta, ya está en su modo principal. La metaetiqueta solo afecta el modo de representación del documento, en lugar del modo de compatibilidad del navegador. Hay una diferencia sutil que, en algunos casos, puede tener un efecto.

Fuente

2012-03-10 15:26:07

¡Gracias! Me salvaste con tu conocimiento – Landmine

¿Qué sucede si un cliente está usando un navegador antiguo? ¿Qué hace el encabezado en ese caso? – James

@James - nada, ya que el navegador no lo reconocerá ... simplemente lo ignora. –

intentan añadir esta cabecera a

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

Presione F12 en IE9 y si no hay modo de documentos Qirks, debe corregir por etiqueta meta. Tal vez este es tu problema.

Fuente

2012-03-10 12:58:30 M1K1O

En realidad, una etiqueta mejor para usar es 'ie = edge', esto asegurará que cuando se muestre IE10, u 11, siempre se renderice en el modo más estándar. –

pensé que la pregunta apunta a solucionar el problema en la vista de compatibilidad de IE-9 para no omitir la vista de compatibilidad – krish

IE9 en modo de compatibilidad no exhiben los estilos CSS correctamente

Respuesta

Cuestiones relacionadas