exdeniz

Всегда использую:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Самый простой способ использовать iCheck.
Два класса в css и две строчки в html

codepen.io/exdeniz/pen/sIihf

cdpn.io/HJojz
Как варинат, кроссбраузерность уже сам (но для большинства браузеров это возможно)

Что значит не работает? Какой IE? Код @font-face для начала.

Скорей всего не работает подключение шрифтов в семейство в IE8. IE8 и ниже могут подключать 4 шрифта в одно семейство.
Вариантов три (по стоимости и затратам):
1. Сокращение вариантов шрифта
2. Использования конкретного определения в @font-face

font-family: "Open Sans ExtraBold Italic";
 font-style: normal;
font-weight: normal;

вместо

font-family: "Open Sans";
 font-style: italic;
font-weight: 800;

Сложности возникают при определении стилей по умолчанию типа i, b, em и т.п.

3. Использование mixin для генерации отдельного css для IE.

Последнее время для нормальных браузеров использую flex model для прижатия футера к низу. Заодно растягиваем content часть максимально. Работает везде.
Ссылка

Генерируйте название селекторов рандомно.

PIE и фильтр по разным классам разносили?