html CSS网格布局即使在带有前缀的IE11中也不起作用
问题描述:
我正在为网格使用以下HTML标记。
<section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x">....</article> <article class="grid-item height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x height-2x">....</article> </section>
SCSS代码如下所示:
.grid { display: grid; grid-template-columns: repeat( 4, 1fr ); grid-gap: 30px; align-items: start; .grid-item { &.height-2x { grid-row: span 2; } &.width-2x { grid-column: span 2; } } }
由于我在工作流程中使用自动前缀,因此会自动添加所有带有-ms前缀的相关属性。我可以通过检查元素确认。
现在,问题是此代码在Chrome,Firefox和Opera中运行正常,但是当我在MicrosoftEdge或IE11中打开此页面时,所有网格项在第一个单元格处都相互重叠。根据该站点的介绍,这些浏览器支持带-ms前缀的CSS网格布局。我已经为这种情况创建了一个CodePen。
CodePen链接
为什么不起作用?
.grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); -ms-grid-rows: (270px)[4]; grid-template-rows: repeat(4, 270px); grid-gap: 30px; } .grid .grid-item { background-color: #000; color: #fff; text-align: center; line-height: 270px; } .grid .grid-item.height-2x { -ms-grid-row: span 2; grid-row: span 2; } .grid .grid-item.width-2x { -ms-grid-column: span 2; grid-column: span 2; } <section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x">....</article> <article class="grid-item height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article> <article class="grid-item width-2x height-2x">....</article> </section>
浏览器仅在提交表单时选中复选框输入值数据,这是浏览器的标准行为吗?如果未提供任何值数据,默认值是否始终为“ on”?假设以上内容正确,那么在所有浏览器中这种行为是否一致?