css网格元素放置chrome与firefox

时间:2018-02-17 16:55:42

标签: html css css3 css-grid

我不知道这是我的代码有问题,还是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属性,并将它们放在header-block的左上角。有没有人有这个建议的解决方案?

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

EDT2:问题Fiddle。小提琴使用了Warren Wan建议的解决方案,虽然它仍然无法修复chrome 64.0.3282.167(官方构建)(64位)中的问题。

2 个答案:

答案 0 :(得分:1)

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

FireFox test result with FireFox version

Chrome test resultChrome 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>
{{1}}

答案 1 :(得分:0)

由于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-标志添加到&#34;转换&#34;还