Кроссбраузерность правого бокового меню. Префиксы -moz- и -ms-

Есть сайт

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
/*
#sidemenu {
  background: #afafaf;
  display: inline-flex;
  grid-area: leftsidemenu;
  flex-direction: column;
  display: block;
  width: 420px;
  border-right: 1px solid #000;
  position: fixed;
}

 #sidemenu > li {
    padding: 0.5em 0 0.5em 0.3em;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;   
}


    

#sidemenu li:hover {
  background: lightgreen;
}

#sidemenu li a {
  color: #000;
}

/*#sidemenu li:hover a,*/
/*
#sidemenu li:hover .fa {
  color: #fff;
}
*/
/*
#sidemenu li .fa {
  /*margin-left: 20px;
  margin-right: 10px;*/
/*  
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
*/

    .menu {
      position: relative;
      width: 370px;
    }

    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .menu li {
      padding: 0.5em 0 0.5em 0.3em;
      cursor: pointer;
    }

    ul.level1 {
      border: 1px solid thistle;
    }

    ul.level1>li {
      background-color: #fff;
      border-bottom: 1px solid thistle;
        display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    }

    ul.level1>li:last-child {
      border-bottom: none;
    }

    ul.level2 {
      position: absolute;
      top: 0;
      left: 100%;
      max-width: 559px;
      max-height: 1010px;
      padding: 0.5em 0.3em 0.5em 0.3em;
      background-color: #fff;
      border: 1px solid thistle;
      visibility: hidden;
      white-space: nowrap;
      column-count: 2;
    }

    ul.level2>li {
      padding: 0;
      border-bottom: 1px solid #fff;
    }

    ul.level2>ul>li {
      padding: 0;
    }

    ul.level2>li>ul>li {
      padding: 0;
    }

    ul.level1>li:hover ul.level2 {
      visibility: visible;
    }

    .menu a {
      color: #333;
    }

    .alignblock {
      text-align: center;
      vertical-align: middle;
    }

    .submenu__title {
      margin-bottom: 5px;
    }

    .submenu__title a {
      display: block;
      color: black;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      /* line-height: 1.5; */
      text-decoration: none;
      padding: 3px 5px;
    }

    .submenu__item {
      /* margin-bottom: 0px; */
    }

    .submenu__item a {
      display: block;
      color: gray;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      text-decoration: none;
      padding: 3px 5px;
    }

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: flex;
}

.rightside {
  margin-right: 16px;
  /* display: none;*/
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
  transition: .6s;
  overflow: hidden;
  transform: translateX(-328px);
  */
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

/*
#sidemenu.active .centerplace {
    transform: translateX(0px);
    transition-delay: .4s;
}

#sidemenu{
   width: 60px;
}

#sidemenu.active{
    width: 388px;
}
*/

/* Иное состояние */

/*
.leftside:hover + .centerplace,
.leftside:hover + .centerplace + .nestedblock,
.leftside:hover + .rightside{
    display: none;
}
 */
 
#sidemenu.-short {
  flex-direction: column;
}

#sidemenu.-short .centerplace,
#sidemenu.-short .centerplace .nestedblock,
#sidemenu.-short .rightside {
  display: none;
}

.contentpart {
    display: grid;
    grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
    grid-template-columns: 420px 1fr 245.8px;
    /*height: 100vh;*/
    margin: 0;
    grid-area: centerpart;
}

.leftmenu {
    grid-area: leftsidemenu;
}

.centerarea {
    grid-area: centercolumn;
}

.rightmenu {
    grid-area: rightsidemenu;
}

#pageHeader {
    grid-area: header;
    width: 100%;
}

#pageFooter {
    grid-area: footer;
    width: 100%;
}

.bodyclass {
    display: grid;
    grid-template-areas: "header" "centerpart" "footer";
    grid-template-rows: 60px 1fr 150px;
    /*height: 100vh;*/
    margin: 0;
}

.b-footer__container {
    background-color: #000;
}

(один из файлов стилей - левое, правое боковое меню, шапка и подвал сайта)

Есть также группа файлов Более полный код (более подробное описание стилей правого бокового меню). В браузере хром отображается как

введите сюда описание изображения

В файерфоксе блоки Статус и Показывать товар расположены с отступами между ними.

введите сюда описание изображения

А в IE11 отображается как в файерфоксе, только правое боковое меню оказывается слева

введите сюда описание изображения

введите сюда описание изображения

Как добиться отображения правого бокового меню в файерфоксе и ие11 как в хроме? В коде блоки .FilterBlockNewDesign должны располагаться подряд без отступа. Какие есть свойства с префиксами -moz- и -ms-, выравнивающие текст как надо?


Ответы (0 шт):