我正在制作一个日期选择器组件,其中包含我使用 CSS 网格设置样式的日历。它在除 IE11 之外的所有浏览器中都能很好地工作,IE11 在左上角的相同位置显示所有元素。我是否缺少一个 IE11 特定的 css 属性来阻止这种情况发生,或者它在 IE11 中是否不可行?
它在 Chrome 中的外观:
它在 IE11 中的样子
这是代码片段:
.date-picker .dates .days {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days-of-week {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days .day {
margin-top: .5em;
margin-bottom: .5em;
height: 36px;
width: 36px;
}
.date-picker .dates .days-of-week .day {
height: 36px;
width: 36px;
}
<div
id="date-picker"
class="date-picker relative cursor-pointer input select text-1_25 active"
min="2021-04-28"
max="2021-05-28"
>
<div
class="
dates
hidden
absolute
left-0
right-0
px-24
py-16
bg-white
rounded-16
shadow-xl
active
"
>
<div
class="
days-of-week
border-b-solid border-gray-a9acc4 border-b
text-gray-65657b
py-8
"
>
<div class="day">S</div>
<div class="day">M</div>
<div class="day">T</div>
<div class="day">W</div>
<div class="day">T</div>
<div class="day">F</div>
<div class="day">S</div>
</div>
<div class="days">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day selected">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day inactive">29</div>
<div class="day inactive">30</div>
<div class="day inactive">31</div>
</div>
</div>
</div>
答案 0 :(得分:0)
经过更多研究后,我似乎必须指定网格中每个单元格的位置才能使其在 IE11 中正确显示
所以CSS看起来像这样:
.date-picker .dates .days {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days-of-week {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days .day {
margin-top: .5em;
margin-bottom: .5em;
height: 36px;
width: 36px;
}
.date-picker .dates .days-of-week .day {
height: 36px;
width: 36px;
}
/* Because of IE11 we have to specify every cells place in the grid */
/* Days of the week cell placement */
.days-of-week div:nth-child(1){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(2){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(3){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(4){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(5){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(6){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 1;
grid-row: 1;
}
.days-of-week div:nth-child(7){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 1;
grid-row: 1;
}
/* Day cell placement */
/* Row one */
.days div:nth-child(1){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(2){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(3){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(4){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(5){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(6){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 1;
grid-row: 1;
}
.days div:nth-child(7){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 1;
grid-row: 1;
}
/* Row two */
.days div:nth-child(8){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(9){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(10){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(11){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(12){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(13){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 2;
grid-row: 2;
}
.days div:nth-child(14){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 2;
grid-row: 2;
}
/* Row three */
.days div:nth-child(15){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(16){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(17){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(18){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(19){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(20){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 3;
grid-row: 3;
}
.days div:nth-child(21){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 3;
grid-row: 3;
}
/* Row four */
.days div:nth-child(22){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(23){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(24){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(25){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(26){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(27){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 4;
grid-row: 4;
}
.days div:nth-child(28){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 4;
grid-row: 4;
}
/* Row five */
.days div:nth-child(29){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(30){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(31){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(32){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(33){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(34){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 5;
grid-row: 5;
}
.days div:nth-child(35){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 5;
grid-row: 5;
}
/* Row six */
.days div:nth-child(36){
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(37){
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(38){
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(39){
-ms-grid-column: 4;
grid-column: 4;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(40){
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(41){
-ms-grid-column: 6;
grid-column: 6;
-ms-grid-row: 6;
grid-row: 6;
}
.days div:nth-child(42){
-ms-grid-column: 7;
grid-column: 7;
-ms-grid-row: 6;
grid-row: 6;
}