IE8 не применяет стиль, даже если его инструменты разработчика показывают его

Интересно, встретил ли кто-нибудь это и что он сделал, чтобы исправить это. IE, не применяет стиль для класса, который я добавил во время выполнения (jQuery). Странно то, что инструменты разработчика показывают, что он должен применяться. См. Рисунок ниже.IE8 не применяет стиль, даже если его инструменты разработчика показывают его

Элемент «fa-bars» имеет родителя с «синим» классом. В этом случае я добавил «синий» класс в $ (document) .ready(). Если я добавлю «синий» класс в разметку HTML (вместо выполнения во время выполнения), он правильно применит стиль. Но я не хочу этого делать.

У меня есть только эта проблема в IE (я использую IE8), но Chrome и FF отображают страницу так, как я ожидаю (правильно). Любые идеи о том, как это решить?

Похоже, что это проблема только при рендеринге псевдо-контента (например, FontAwesome). Если я заменю элемент простым текстом, он будет работать.

enter image description here

ДОБАВЛЕНО:

Вот мой полный HTML со ссылками на КДС для FontAwesome и JQuery:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width" /> 
     <title>Test</title> 
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.nav-toc').addClass('blue'); 
      }); 
     </script> 
     <style type="text/css"> 
      .fa {font-size: 1.5em;} 
      .nav-toc {color: red;} 
      .blue {color: blue;} 
     </style> 
    </head> 

    <body class="pson-green"> 
     <div id="master-body"> 
      <!-- Top banner (Menu) --> 
      <div id="master-header"> 
       <div class="content-wrapper"> 
        <div id="nav-grp-toc" class="nav-container"> 
         <div class="nav-btn nav-toc" title="Contents Menu"><i class="fa fa-bars"></i></div> 
        </div><div id="nav-grp-help" class="nav-container"> 
         <div class="nav-btn nav-help" title="Help"><i class="fa fa-question"></i></div> 
        </div><div id="nav-grp-counters" class="nav-container"> 
         <div id="page-counter" class="nav-page counter-panel"> 
          <div id="current-page" class="current-count" title="Current page number"></div> 
          <div id="total-pages" class="max-count" title="Total number of pages"></div> 
         </div> 
         <div id="question-counter" class="nav-quiz counter-panel"> 
          <div id="current-question" class="current-count" class="Current question number"></div> 
          <div id="total-questions" class="max-count" title="Total number of questions"></div> 
         </div> 
        </div><div id="nav-grp-steppers" class="nav-container"> 
         <div class="nav-btn nav-page nav-prev" title="Back"><i class="fa fa-chevron-left"></i></div> 
         <div class="nav-btn nav-page nav-next" title="Next"><i class="fa fa-chevron-right"></i></div> 
        </div><div id="nav-grp-exit" class="nav-container"> 
         <div class="nav-btn nav-page nav-exit" title="Exit Course"><i class="fa fa-sign-out"></i></div> 
        </div> 
       </div> 
       <div id="dimmer-for-header" class="dimmer"></div> 
      </div> 
     </div> 
    </body> 
</html>

источник

2014-01-31 Frank Fajardo

Нет контента? – crush

@crush, что вы имеете в виду? –

Он имеет в виду свой код – Deryck

Я думаю, что я, возможно, нашли ответ. Как видно из моих поисков подобных сообщений, проблема связана с обработкой IE псевдоэлементов. К сожалению, количество ответов или предложений на эти должности, похоже, не работает в моем случае, за исключением этого SO item. В принципе, это побуждает IE перерисовывать псевдоэлемент, временно добавляя в DOM тег стиля, который удаляет весь псевдо-контент, а затем сразу же удаляет этот тег стиля. Кажется, что это работает, в сочетании с проверкой на IE8 на основе этого SO item. Я добавил это к моему сценарию:

var ie = (function() { 
    var undef, 
    v = 3, 
    div = document.createElement('div'), 
    all = div.getElementsByTagName('i'); 
    while (
     div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', 
         all[0] 
         ); 
    return v > 4 ? v : undef; 
}()); 

function redrawPseudos() { 
    var head = document.getElementsByTagName('head')[0], 
    style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.styleSheet.cssText = ':before,:after{content:none !important;}'; 
    head.appendChild(style); 
    setTimeout(function() { 
     head.removeChild(style); 
    }, 0); 
}

Так что, когда я должен добавить/удалить класс, который я ожидаю, чтобы повлиять на укладку псевдо элемента, я должен сделать это:

$('.class1').addClass('newclass'); 
if (ie === 8) { 
    redrawPseudos(); 
}

Вероятно, это дорогой способ сделать это. Но у меня только меньше дюжины псевдоэлементов.

ДОБАВЛЕНО:

Вы можете улучшить это путем пропускания селектора redrawPseudos() и включить его в стиле. Это ограничит перерисовку элементам, указанным вашим селектором.

function redrawPseudos(sel) { 
    ... 
    style.styleSheet.cssText = sel + ':before, ' + sel + ':after, ' + sel + ' *:before, ' + sel + ' *:after ' + '{content:none !important;}'; 
    ... 
}

источник

2014-01-31 04:06:21

IE8 не применяет стиль, даже если его инструменты разработчика показывают его

ответ

Смежные вопросы