Html css网格元素放置chrome与firefox

我不知道这是我的代码的问题，还是chrome对网格规范（或者firefox）的实现的问题，但如果我指定了相对位置调整，我会看到元素在网格中被错误放置

请看以下内容：

HTML

<div class="sheet-container">
  <div class="sheet-header-block sheet-one"></div>
  <div class="sheet-bottom-left sheet-corner sheet-one"></div>
  <div class="sheet-top-right sheet-corner sheet-one"></div>
  <div class="sheet-header-block sheet-two"></div>
  <div class="sheet-bottom-left sheet-corner sheet-two"></div>
  <div class="sheet-top-right sheet-corner sheet-two"></div>
  <div class="sheet-header-block sheet-three"></div>
  <div class="sheet-bottom-left sheet-corner sheet-three"></div>
  <div class="sheet-top-right sheet-corner sheet-three"></div>
</div>

在firefox中，这段代码导致角div被定位在头块各自的角上，但分别向上定位2px和左4px

在chrome中，任何位置调整都会否定“自我对齐”或“自我对齐”属性，并将其置于标题栏的左上角。有人对此有建议的解决方法吗

编辑：我只需要支持chrome和firefox的最新版本。额外的兼容性当然是一个加号。由于开发环境的原因，只能使用类

---

EDT2：关于这个问题。fiddle使用了Warren Wan建议的解决方案，尽管它仍然没有解决chrome 64.0.3282.167（官方版本）（64位）中的问题。

这是由于CSS跨浏览器兼容性，如果这样做，您应该会很好：

.sheet-bottom-left{
    -webkit-align-self:end;
    -moz-align-self:end;
    align-self:end;
    top:-2px;
}

.sheet-top-right{
    -webkit-justify-self:end;
    -moz-justify-self:end;
    justify-self:end;
    left:-4px;
}

---

注意：您可能还需要将-moz-和-webkit-标志添加到“transform”中。

您写错了

css

.sheet右上

CSS

应该是

左：0；顶部：2个。因为你对
自我证明的理解：结束则表示内容将在右边缘自动显示。如果设置
旋转：45度
则需要设置
顶部
或
底部
位置


及

注意：您应该编写
css前缀
，以支持较旧的
浏览器


.sheet容器{
显示：网格；
网格模板列：80px 80px 80px；
网格模板行：40px；
网格间距：5px；
网格模板区域：“一二三”；
背景色：白色；
宽度：100%；
身高：100%；
}
.页头块{
背景色：红色；
}
.第一张{
网格面积：1；
}
.第二张{
网格面积：2个；
}
.第三张{
网格面积：3个；
}
.床单角{
位置：相对位置；
变换：旋转（45度）；
高度：2倍；
宽度：5px；
背景色：黑色；
}
.左下角{
自我对齐：结束；
顶部：-2px；
}
.右上角{
自我辩护：结束；
左：0；
顶部：2个；
}

Hmm，很有意思，所以最新的chrome版本（64.0.3282.167（官方版本）（64位））中的一些东西让我们很高兴知道这一点。然而，你的建议并不能解决问题。为了一个简单的问题示例，我只在每个方向上操纵了一个方向，但是在实际项目中，角div是相对垂直和水平放置的。这似乎也不能解决问题。我已经用小提琴更新了OP，显示了问题。我不确定应该发生什么，但你不应该看到网格区域与元素相同。定位这些角的最简单（也是最符合逻辑的imho）方法是将它们放在
.sheet header block
元素中，然后从那里定位它们。是的，根据规范，网格区域与div等元素不同，定位网格元素（相对或绝对）在栅格区域内，应相对于栅格区域对其进行定位（就像该区域是相对定位的图元一样）。至于我为什么这样做，实际上这样定位它们比在header块元素中更容易（至少在它工作时是这样），因为需要进行的计算更少。
.sheet-bottom-left{
    -webkit-align-self:end;
    -moz-align-self:end;
    align-self:end;
    top:-2px;
}

.sheet-top-right{
    -webkit-justify-self:end;
    -moz-justify-self:end;
    justify-self:end;
    left:-4px;
}

.sheet-top-right{
    justify-self:end;
    left: 0;
    top: 2px;
}