Основные функции CSS, не работающие в IE8

Question

Я полностью в затруднении здесь. Я разрабатываю веб-сайт, который должен поддерживать большую группу пользователей, которые используют IE8. Все работает в IE9 и выше, а также в Chrome, Firefox и Safari - но я не могу на всю жизнь даже получить базовый CSS - например, свойство height - последовательно работать в IE8.

Например:

CSS в моем стилей:

#loginName{ 
    height:1.6rem; 
    display:inline-block; 
    padding:0.75rem 1rem 0; 
    border-radius:1.5rem 1.5rem 0 0; 
    transition:all 0.5s ease-in-out; 
} 

Какие инструменты IE 8 Developer показывает:

#loginName{ 
    display:inline-block; 
    transition:all 0.5s ease-in-out; 
    border-radius:1.5rem 1.5rem 0 0; 
} 

Я понятия не имею, что здесь происходит! У меня есть! DOCTYPE объявила первую вещь на странице, но это единственное «решение», которое я нашел. Насколько мне известно, высота и отступы не нуждаются в каком-либо специальном лечении, но я загружаю версию разработки Modernizr, последнюю версию Prefixfree, Selectivizr и REM polyfill, чтобы попытаться исправить другие проблемы IE8!

Вы можете увидеть живую страницу в https://mttoday.co

Я за рулем себя гайки с этим - любая помощь будет оценен по достоинству!

Я использую полиномиальное устройство REM - https://github.com/chuckcarpenter/REM-unit-polyfill. Кажется, что этот полиполк работает только в том случае, если я помещаю его перед PrefixFree (по-видимому, потому, что polyfill только ищет связанные таблицы стилей, а PrefixFree помещает стили в голову), но по какой-то причине это делает другие вещи (например, меню наведения на правая сторона домашней страницы) не работает должным образом. Угадав, что существуют конфликты между разными сценариями.

Кто-нибудь знает о скрипте polyfill, который будет искать как связанные таблицы стилей, так и стили в голове или в строке?

Answer 1

IE8 не поддерживает резервирование в качестве единицы измерения. Вместо этого используйте em или px.

http://caniuse.com/rem

В качестве альтернативы вы могли бы сделать что-то вроде:

#loginName{ 
    height:1.6em; // Or another value 
    height:1.6rem; 
} 

, чтобы обеспечить запасной вариант IE8.