2012-03-09 11 views
6

Mam zagnieżdżonych div (patrz poniżej), które mają różne klasy CSS dać kolor tła dla pojemnika i format tekstuIE9 w trybie zgodności nie wyświetla style CSS poprawnie

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

Jest zamykając znacznik sekcji div, tam jest więcej treści, która renderuje się poprawnie.

CSS dla powyższego jest:

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

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

Kiedy wykomentuj kolor tła w .section formatowanie sectionTitle jest stosowany, ale gdy kładę background-color tam nadpisuje kolor sekcjaTytuł. Próbowałem ustawić kolor .section, aby dopasować .sectionTitle, ale to nadal nie działa.

W każdej przeglądarce (niezgodność IE9, Firefox, Chrome) działa dobrze i patrzę na to od kilku godzin, co jest nieco frustrujące, ponieważ nie widzę problemu.

Zawartość jest na stronie ASP.NET, która używa MasterPage który ma doctype:

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

Czy ktoś może pomóc rzucić nieco światła na to proszę?

góry dzięki

Andy

+0

czy sprawdziłeś obie klasy z tą samą własnością? – krish

Odpowiedz

13

Program Internet Explorer ma "funkcję" zgodności, w której zawsze renderuje witryny znajdujące się w sieci lokalnej w trybie zgodności. Musisz jednoznacznie wyłączyć to na dwa sposoby.

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

Ten znacznik krawędzi mówi, że zawsze renderować w swoim najbardziej standardowym trybie, który obsługuje.

Druga metoda (którą preferuję) jest używana, jeśli używasz technologii po stronie serwera, takiej jak asp.net lub php, która ma dodać nagłówek http (w asp.net to idzie w global.asax, również chrome = 1 pozwala chromeframe jeśli jest zainstalowany):

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

EDIT:

jest też trzecia droga, a to w celu wyłączenia go w zgodności karcie widok w oknie Opcje internetowe. Wpływa to jednak tylko na twój komputer.

Lepiej użyć metody nagłówka, jeśli jest to możliwe, a nie metatag. Do czasu, gdy przeglądarka odczyta metatag, jest już w trybie podstawowym. Metatag wpływa tylko na tryb renderowania dokumentu, a nie na tryb kompatybilności przeglądarki. Istnieje subtelna różnica, która w niektórych przypadkach może mieć wpływ.

+0

Dziękuję! Uratowałeś mnie swoją wiedzą. – Landmine

+0

Co się stanie, jeśli klient rzeczywiście korzysta ze starej przeglądarki? Co robi nagłówek w takim przypadku? – James

+0

@James - nic, ponieważ przeglądarka go nie rozpozna ... po prostu je ignoruje. –

0

spróbować dodać do nagłówka

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

Naciśnij klawisz F12 na IE9 i jeśli jest tryb dokument Qirks, trzeba go naprawić przez meta tagu. Może to twój problem.

+0

Właściwie lepszym tagiem do użycia jest 'ie = edge', to zapewni, że gdy IE10 wyjdzie, lub 11, zawsze będzie renderować w najbardziej standardowym trybie. –

+0

Myślałem, że to pytanie, aby naprawić problem w widoku zgodności IE-9, aby nie pomijać widoku zgodności – krish

Powiązane problemy