我不知道这是我的代码的问题,还是 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 中,此代码导致 Angular div 位于标题 block 各自的 Angular ,但分别向上移动 2px 和向左移动 4px。
在 chrome 中,任何位置调整都会否定 justify-self 或 align-self 属性并将它们放在标题 block 的左上角。有人对此有建议的修复方法吗?
编辑:我只需要支持最新的 chrome 和 firefox 版本。额外的兼容性当然是一个加号。由于开发环境,只能使用类。
EDT2:Fiddle的问题。 fiddle 使用了 Warren Wan 建议的解决方案,尽管它仍然没有解决 chrome 64.0.3282.167(官方构建)(64 位)中的问题。
最佳答案
你写错了 css
。 .sheet-top-right
CSS
应该是 left: 0;top: 2px;
。由于您对 justify-self: end;
的理解,这意味着内容将自动显示在右边缘。如果设置 rotate: 45(deg)
,则需要设置 top
或 bottom
position
。
FireFox test result with FireFox version .
Chrome test result和 Chrome version 63.0.3239.132 (Official Build) (64-bit)
Note: you should write
css prefix
for support olderbrowser
.
.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>
关于html - css 网格元素放置 chrome 与 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48843684/