Проблема с сеткой CSS в Internet Explorer 11, даже если вы используете Autoprefixer CSS онлайн - PullRequest
Новая
       20

Проблема с сеткой CSS в Internet Explorer 11, даже если вы используете Autoprefixer CSS онлайн

1 голос
/ 10 мая 2019

Я использую значения из базы данных, используя php, html и css.моя проблема в css, я использую grid вместо table, потому что мне сказали, что он намного лучше реагирует.Я был рад, что это решение отлично работает с Mozilla Firefox, Chrome, ... но, конечно, пришло это исключение из IE (v11) ...

Я использовал Autoprefixer CSS онлайн для обеспечения совместимости с IE, ситуация таковалучше, как кажется, то есть распознавать сетку, но все же не очень хороший результат (все в 1 столбце) 

/*here the concerned part of the code*/
.grid
{
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -ms-flex-line-pack: start;
        align-content: start;
    float: left;
}
@media only screen and (min-width : 1024px) {
  .grid7{
      -ms-grid-columns: 10% 20% 20% 10% 10% 15% 15%;
      grid-template-columns: 10% 20% 20% 10% 10% 15% 15%;
      width: 99.6%;
  }
  .grid6{
      -ms-grid-columns: 10% 23% 24% 23% 10% 10%;
      grid-template-columns: 10% 23% 24% 23% 10% 10%;
      width: 99.6%;
  }
  .grid4{
      -ms-grid-columns: 35% 35% 15% 15%;
      grid-template-columns: 35% 35% 15% 15%;
      width: 99.6%;
  }
}
/*precision : 
-class grid and grid+i are given to same DOM element, for make general grid and grid+i in function of the number of column I wanted
-I use of course other media-query for different size because I change the number of column in function of the size of the screen */

/*EDIT : following the an example of related html*/
<div id='users'>
            <form action="menu.php?Option=selectUser" method="post">
                <div id="titleRow" class="grid grid4">
                    <span class="titleCell">
                        <button name="order" class="titlebutton" type="submit" value="<?=$users[0]->namealias()?>"><?=$users[0]->namealias()?></button>
                        <input type='text' class='ExistingName' name="Name" placeholder="Szukaj:"> 
                    </span>
                    <span class="titleCell">
                        <button name="order" class="titlebutton" type="submit" value="<?=$users[0]->levelalias()?>"><?=$users[0]->levelalias()?></button>
                        <input type="text" class="ExistingLevel" name="Level" placeholder='Szukaj:'>
                    </span>         
                    <span class="titleCell centeredElement"><h2>Usuń</h2></span>
                    <span class="titleCell centeredElement"><h2>Edytuj</h2></span>
                </div>
            </form>
            <form>
                <?php foreach($users as $user) { ?>
                        <div id="<?='row'.$user->name()?>" class="grid grid4">
                            <span><input type="text" id="<?='name'.$user->name()?>" name="name" value='<?=$user->name()?>' readonly></span>
                            <span><input type="text" id="<?='level'.$user->name()?>" name="level" value='<?=$user->level()?>' readonly></span>
                            <span class='centeredElement' ><button class="ButtonDelete" type="button" value='<?=$user->name()?>'></button></span>
                            <span class='centeredElement' > <button class="ButtonEdit" type="button" value='<?=$user->name()?>'></button> </span>
                        </div>
                <?php } ?>
            </form>
        </div>

В другом браузере у меня нет проблем, сетка нормальная, несколько столбцов, все отдельные, ожидаемый результат, вIE у меня просто не было сетки, тогда я использовал Autoprefixer CSS онлайн, затем у меня есть сетка, но все записи в первом столбце :( Я не понимаю, что не так в коде

...