[Павел Турченко]

Доброго дня! Есть такая проблема. Сделал верстку через flexbox, но в IE 10 и 9 все рассыпается, если меняю стили то сыпеться все в остальных браузерах. Решил попробовать написать костыль на фильтр по браузеру, то бишь если браузер IE, тогда к таким-то классам присвоить такие-то значения, ну а в остальных случаях оставить исходный вариант.
Изначально в стилях будет эта запись:
.list{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list_item{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}

Для IE надо заменить класс list и отчистить класс list_item:
.list{
display: -ms-flexbox;
-ms-box-orient: horizontal;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
list_item {}

Для решения я написал вот такую штуку:
var browser = navigator.appName;

var list_for_IE = [ "display: -ms-flexbox;", "-ms-box-orient: horizontal;", "display: -webkit-flex;",
"display: -moz-flex;", "display: -ms-flex;", "display: flex;", "-webkit-flex-flow: row wrap;",
"-moz-flex-flow: row wrap;", "-ms-flex-flow: row wrap;", "flex-flow: row wrap;"]

var list_item_for_IE = [ ]
if (browser === "NetScape") {
var list = document.getElementsByClassName('list');
list.classList.add("list_for_IE");
var list_item = document.getElementsByClassName('list_item');
list_item.classList.add("list_item_for_IE");
};
Помогите пожалуйста довести её до ума.