IE9 в режиме совместимости неправильно отображает стили CSS - PullRequest
Новая
       2

IE9 в режиме совместимости неправильно отображает стили CSS

6 голосов
/ 09 марта 2012

У меня есть вложенный div (см. Ниже), в котором есть разные классы CSS, чтобы задать цвет фона для контейнера и формат для текста 

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

Есть закрывающий тег для раздела div, там больше контента, который правильно отображает.

CSS для вышеупомянутого: 

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

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

Когда я закомментирую цвет фона в .section, применяется форматирование sectionTitle, но когда я помещаю туда background-color, он перезаписывает цвет sectionTitle. Я попытался установить цвет .section, чтобы он соответствовал .sectionTitle, но это все еще не работает.

В каждом браузере (несовместимость IE9, Firefox, Chrome) он работает отлично, и я смотрю на это уже пару часов, и это немного расстраивает, так как я не могу определить проблему.

Содержимое находится на странице ASP.NET, которая использует MasterPage с типом документа: 

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

Может кто-нибудь помочь пролить свет на это, пожалуйста?

Заранее спасибо

Andy

Ответы [ 2 ]

13 голосов
/ 10 марта 2012

Internet Explorer имеет функцию совместимости, в которой он всегда отображает сайты, находящиеся в локальной сети, в режиме совместимости. Вы должны явно отключить это одним из двух способов. 

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

Этот маркер ребра говорит, то есть всегда рендерить в своем самом стандартном режиме, который он поддерживает.

Другой метод (который я предпочитаю) используется, если вы используете серверную технологию, такую ​​как asp.net или php, которая заключается в добавлении заголовка http (в asp.net это происходит в global.asax, также chrome). = 1 включает Chromeframe, если установлен): 

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

EDIT:

Существует также третий способ, который заключается в отключении его на вкладке представления совместимости в окне «Свойства обозревателя». Однако это влияет только на ваш компьютер.

Кроме того, лучше использовать метод заголовка, если это вообще возможно, а не метод метатега. К тому времени, когда браузер прочитал метатег, он уже находится в основном режиме. Метатег влияет только на режим рендеринга документа, а не на режим совместимости браузера. Существует небольшая разница, которая в некоторых случаях может оказать влияние.

0 голосов
/ 10 марта 2012

попробуйте добавить это в заголовок 

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

Нажмите F12 в IE9 и, если есть режим документа Qirks, вы должны исправить это с помощью метатега.Может быть, это твоя проблема.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...