Показать сообщение отдельно
  #1 (permalink)  
Старый 30.10.2015, 12:04
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Замена стилей класса
Доброго дня! Есть такая проблема. Сделал верстку через 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");
};
Помогите пожалуйста довести её до ума.

Последний раз редактировалось Павел Турченко, 30.10.2015 в 12:29.
Ответить с цитированием