css 网格元素放置 chrome 与 firefox

Question

我不知道这是我的代码有问题，还是 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>

CSS

.sheet-container{
    display:grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows:40px;
    grid-gap:5px;
    grid-template-areas:"one two three";
    background-color:white;
    width:100%;
    height:100%;
}
.sheet-header-block{
  background-color:red;
}
.sheet-one{
  grid-area:one;
}
.sheet-two{
  grid-area:two;
}
.sheet-three{
  grid-area:three;
}
.sheet-corner{
    position:relative;
    transform:rotate(45deg);
    height:2px;
    width:5px;
    background-color:black;
}
.sheet-bottom-left{
    align-self:end;
    top:-2px;
}
.sheet-top-right{
    justify-self:end;
    left:-4px;
}

在 Firefox 中，此代码导致角落 div 位于标题块各自的角落，但分别向上重新定位 2px 和向左 4px。

在 chrome 中，任何位置调整都会否定 justify-self 或 align-self 属性并将它们放在标题块的左上角。有人对此有建议的解决方法吗？

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

EDT2：Fiddle 的问题。小提琴使用 Warren Wan 建议的解决方案，尽管它仍然没有解决 chrome 64.0.3282.167 (Official Build) (64-bit) 中的问题。

Answer 1

你写错了css。 .sheet-top-right CSS 应该是 left: 0;top: 2px;。由于您对justify-self: end; 的理解，因此意味着内容将在右边缘自动显示。如果你设置了rotate: 45(deg)，你需要设置top或者bottomposition。

FireFox test result with FireFox version.

Chrome test result 和 Chrome version 63.0.3239.132 (Official Build) (64-bit)

注意：您应该写css prefix 以支持旧的browser。

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

.sheet-container{
    display:grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows:40px;
    grid-gap:5px;
    grid-template-areas:"one two three";
    background-color:white;
    width:100%;
    height:100%;
}
.sheet-header-block{
  background-color:red;
}
.sheet-one{
  grid-area:one;
}
.sheet-two{
  grid-area:two;
}
.sheet-three{
  grid-area:three;
}
.sheet-corner{
    position:relative;
    transform:rotate(45deg);
    height:2px;
    width:5px;
    background-color:black;
}
.sheet-bottom-left{
    align-self:end;
    top:-2px;
}
.sheet-top-right{
    justify-self:end;
    left: 0;
    top: 2px;
}

<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>

Answer 2

由于 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- 标志添加到“转换”。