我使用php，html和css处理数据库中的值。 我的问题是在css中，我使用网格而不是表格，因为有人告诉我它的响应性更好。 我很高兴这个解决方案可以与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，然后有网格，但所有记录都在第一列中：(我不明白代码中有什么问题