Форум

Павел Турченко · #1 (**permalink**) 30.10.2015, 12:04

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

ruslan_mart · #2 (**permalink**) 30.10.2015, 12:30

if(/MSIE 9|10/.test(window.navigator.userAgent) {
     var i, list = document.querySelectorAll('.list');
     for(i = 0; i < list.length; i++) {
          list[i].classList.add('list_for_IE');
     }
}

.list {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.list.list_for_IE {
    стили для IE
}
.list:not(.list_for_IE) .list_item {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}

Павел Турченко · #3 (**permalink**) 30.10.2015, 12:49

структуру в HTML мне оставить старую, то с классами стилей чуток запутался:
<ul class="list">
<li class="list_item">блабла</li>
</ul>

ruslan_mart · #4 (**permalink**) 30.10.2015, 13:39

Павел Турченко, Вы опишите, что в итоге у Вас должно получиться? Может здесь вообще flex не нужен.

Павел Турченко · #5 (**permalink**) 30.10.2015, 13:44

Ruslan_xDD,
http://myd.pe.hu/test.html - вот эта страница, она везде отображается хорошо, кроме IE10 если заменить стили, то в IE 10 она отображается так же хорошо, но только не выравнивает страницы по высоте, заказчик согласен на такеи условия. поэтому мне надо только пофиксить эту страницу, ну и 9 заодно.

ruslan_mart · #6 (**permalink**) 30.10.2015, 13:51

Павел Турченко, там и не нужен flex, как я и предполагал.

Вот, можете посмотреть на примере моего бесконечноуровнего меню на CSS:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Многоуровневое/бесконечоуровневое меню на CSS (by Ruslan_xDD aka Black Shadow)</title>
    <style type="text/css">
      .menu {
          background: #252525;
          color: #AAA;
          font-family: verdana, arial, helvetica;
          font-size: 9pt;
          height: 80px;
          line-height: 80px;
      }
      .menu a {
          color: inherit;
          text-decoration: none;
      }
      .menu div {
          cursor: pointer;
          display: inline-block;
          padding: 0 15px;
      }
      .menu div, .menu li, .menu li.menu-sub:after, .menu ul {
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
      }
      .menu div:hover {
          background: #333;
          color: #DAAB5A;
          position: relative;
          text-shadow: 0 0 8px #FB954B;
      }
      .menu div:hover > ul, .menu li:hover > ul {
          opacity: 0.9;
          visibility: visible;
      }
      .menu li {
          padding: 0 15px;
      }
      .menu li:hover, .menu li.menu-selected {
          background: #222;
          color: #DAAB5A;
      }
      .menu li ul {
          left: 100%;
          margin: -30px 0 0;
      }
      .menu li.menu-group {
          border-top: 1px dashed #888;
          margin-top: 5px;
      }
      .menu li.menu-sub { /*Or CSS4 selector: .menu $li ul:after*/
          padding-right: 25px;
      }
      .menu li.menu-sub:after {
          border: 6px solid transparent;
          border-left-color: #888;
          content: '';
          margin-top: 8px;
          position: absolute;
          right: 0;
      }
      .menu li.menu-sub:hover:after {
          border-left-color: #DAAB5A;
      }
      .menu ul {
          background: #333;
          color: #BBB;
          line-height: 30px;
          list-style: none;
          margin: 0 0 0 -15px;
          opacity: 0;
          padding: 0;
          position: absolute;
          text-shadow: none;
          visibility: hidden;
          white-space: nowrap;
      }
    </style>
  </head>
  
  <body>
    <div class="menu">
      <div>Меню 1
        <ul>
          <li><a href="#">Меню 1.1</a></li>
          <li><a href="#">Меню 1.2</a></li>
          <li class="menu-sub">
            <a href="#">Меню 1.3</a>
            <ul>
              <li><a href="#">Меню 1.3.1</a></li>
              <li><a href="#">Меню 1.3.2</a></li>
              <li class="menu-sub">
                <a href="#">Меню 1.3.3</a>
                <ul>
                  <li><a href="#">Меню 1.3.3.1</a></li>
                  <li><a href="#">Меню 1.3.3.2</a></li>
                  <li class="menu-sub">
                    <a href="#">Меню 1.3.3.3</a>
                  	<ul>
                      <li><a href="#">Меню 1.3.3.3.1</a></li>
                      <li><a href="#">Меню 1.3.3.3.2</a></li>
                      <li><a href="#">Меню 1.3.3.3.3</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div>Меню 2
        <ul>
          <li><a href="#">Меню 2.1</a></li>
          <li class="menu-sub">
            <a href="#">Меню 2.2</a>
            <ul>
              <li><a href="#">Меню 2.2.1</a></li>
              <li><a href="#">Меню 2.2.2</a></li>
              <li><a href="#">Меню 2.2.3</a></li>
              <li><a href="#">Меню 2.2.4</a></li>
              <li><a href="#">Меню 2.2.5</a></li>
            </ul>
          </li>
          <li class="menu-sub">
            <a href="#">Меню 2.3</a>
            <ul>
              <li><a href="#">Меню 2.3.1</a></li>
              <li><a href="#">Меню 2.3.2</a></li>
              <li><a href="#">Меню 2.3.3</a></li>
              <li><a href="#">Меню 2.3.4</a></li>
              <li><a href="#">Меню 2.3.5</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div>Меню 3
        <!--Меню без ссылок-->
        <ul>
          <li>Меню 3.1</li>
          <li>Меню 3.2</li>
          <li>Меню 3.3</li>
          <li>Меню 3.4</li>
          <li onclick="alert('Hello world!')">Меню 3.5</li>
        </ul>
      </div>
      <div>Меню 4
        <ul>
          <li><a href="#">Меню 4.1</a></li>
          <li><a href="#">Меню 4.2</a></li>
          <li class="menu-group"><a href="#">Меню 4.3</a></li>
          <li><a href="#">Меню 4.4</a></li>
          <li class="menu-sub">
            <a href="#">Меню 4.5</a>
          	<ul>
              <li><a href="#">Меню 4.5.1</a></li>
              <li><a href="#">Меню 4.5.2</a></li>
              <li><a href="#">Меню 4.5.3</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div>Меню 5
        <ul>
          <li><a href="#">Меню 5.1</a></li>
          <li><a href="#">Меню 5.2</a></li>
          <li class="menu-selected"><a href="#">Меню 5.3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Павел Турченко · #7 (**permalink**) 30.10.2015, 13:59

Задача изначально стояла в том, что бы блоки контента, не в зависимости от наполнения были одинаковой высоты, с помощью скрипта я не смог этого добиться, при загрузке они становились одинаковыми при ресайзе текст или выпадал или появлялся скролл, заказчика это не устраивало и я перестроил все на flex, везде он пашет нормально, но в IE10 полный трабл, если в стилях поменять вышеуказаные классы, то все показывают одинаково, только без вытягивания меньших блоков.
Потому решил сделать костыль, для всех браузеров - что бы показывало нормально, для IE - что бы хоть как-то.
Если путано излагаю, извините

ruslan_mart · #8 (**permalink**) 30.10.2015, 14:17

Павел Турченко, это всё можно сделать без flex.

Павел Турченко · #9 (**permalink**) 30.10.2015, 14:39

Ruslan_xDD, возможно, других вариантов я не знаю, пока еще, а переделывать 8 страниц, у меня нет времени. И к сожалению Ваш скрипт, мне не помог и я не знаю почему...

Павел Турченко · #10 (**permalink**) 30.10.2015, 15:24

Вроде нашел решение, удалить строку с -ms- префиксом для list_item, в любом случае спасибо! + от меня

Форум

Справочник

Discord чат

Курсы javascript