CSS网格元素放置铬与Firefox

Question

我不知道这是我的代码的问题，还是Chrome实现Grid Spec(或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中，此代码导致拐角处位于其各自的标头块角，但分别以2px向上重新定位。

。

在Chrome中，任何位置调整都会否定正当自我或对齐的特性，并将其放在标头块的左上角。有人建议这样做吗？

编辑：我只需要支持Chrome和Firefox的最新夫妇发行。当然，其他兼容性是加号。由于开发环境，只能使用类。

edt2：问题的小提琴。小提琴使用沃伦·万(Warren Wan(的建议解决方案，尽管它仍然没有解决Chrome 64.0.3282.167(官方构建((64位(。

Answer 1

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

Firefox测试结果带有Firefox版本。

Chrome测试结果和Chrome版本63.0.3239.132(官方构建((64位(

注意：您应该编写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-标志添加到"变换"。