IE8 не отображает HTML правильно

Question

У меня возникают некоторые проблемы в IE8, которые я никогда раньше не видел. По существу, проблема заключается в том, что есть навигационное меню, которое имеет стили внутри следующей разметки:

 <section class="top-bar-section"> 

     <ul class="left"> 

      <li> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      </li> 

     </ul> 

     </section> 

    </nav> 

Однако в IE8 Я смотрю на дереве йот и HTML не обрабатывается, как описано выше , Ниже приведена картинка, сравнивающая дерево доминирования как в IE8, так и в Chrome.

Вы можете видеть, что нав, раздел и элементы UL закрываются без родительских и дочерних элементов друг с другом. Это приводит к возникновению проблемы с правилами CSS, поскольку они требуют, чтобы они были дочерними и родительскими, чтобы разрешать применение правил CSS.

Answer 1

Это потому, что вы используете тег HTML5, как section есть, и, конечно, IE8 не поддерживает HTML5 тегов, как ожно увидеть в CanIUse

Internet Explorer 8 и более ранних версий, не поддерживают <section> тега ,

Вам нужно что-то, что "включить" HTML5 в IE8, как HTML5 Shiving или Modernizr

HTML5Shiv обходной путь JavaScript, чтобы включить моделирование элементов HTML5 в версиях Internet Explorer до версии 9

Modernizr - это небольшая библиотека JavaScript, которая обнаруживает наличие встроенных реализаций для веб-технологий следующего поколения, то есть функций, которые основаны на спецификациях HTML5 и CSS3.

Answer 2

Для использования тегов HTML5 необходимо использовать скрипт для IE 8- HTML5Shiv. Основное исправления в создании секции элемента HTML5 в голове документа:

document.createElement("section") 

Это какое-то образом позволяет CSS двигателю знать, что элементы с таким именем существует.

Хитрость заключается в том, что вызов document.createElement («раздел») будет внезапно вызвать IE распознать раздел элемента. Никто не знает почему, , но он работает, и вам даже не нужно использовать узел, возвращенный этой функцией .

Из статьи this это объясняет, почему IE8-нужен этот скрипт.

Answer 3

Тег <section> не был заменен IE8.

Это один из новых тегов HTML5 и еще не был изобретен при выпуске IE8. Поэтому IE8 ничего не знает об этом.

IE8 по умолчанию не передает неизвестные элементы.

Для того чтобы IE8 понял тег <section> и другие новые теги HTML5, вам нужно использовать скрипт polyfill html5shiv.Этот скрипт помогает IE8 распознавать эти теги как действительный HTML и, следовательно, правильно их отображать.

Вы также можете использовать Modernizr, который имеет дополнительные функции для работы со старыми браузерами, а также включает в себя функциональность HTML5shiv.

Альтернативой, конечно же, является просто не использовать новые теги HTML5; просто используйте <div> вместо этого, и IE8 будет отлично работать с этим без каких-либо javascript-хаков.