html - 如何让我的网格布局在 Safari 中工作
问题描述
我已经建立了一个代表钢琴键盘的保持纵横比的简单网格布局。它在 firefox 和 chrome 中效果很好,但在 safari 中却很平淡,因为它没有填满可用的垂直空间(见截图)。
铬/火狐:
苹果浏览器:
有什么想法为什么会这样以及我该如何解决?我用谷歌搜索了很多,发现了很多与 safari 相关的网格相关问题,但我找不到可以解决我的问题的解决方案。
Codepen(在 chrome/firefox 与 safari 中进行比较)
https://codepen.io/ChrisVomRhein/pen/RwPGYrM
HTML:
<div id="keyboard">
<ul>
<li id="key-c" class="keys-white button" data-name="c">key-c</li>
<li id="key-d" class="keys-white button" data-name="d">key-d</li>
<li id="key-e" class="keys-white button" data-name="e">key-e</li>
<!-- [...] -->
<li id="key-cis" class="keys-black button" data-name="cis">key-cis</li>
<li id="key-dis" class="keys-black button" data-name="dis">key-dis</li>
<!-- [...] -->
</ul>
</div>
SCSS:
#keyboard {
/* maintain aspect ratio */
position: relative;
padding-bottom: 25%;
> ul {
/* stretch ul to keyboard div */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(45, 1fr);
> li {
font-size: 0;
grid-row: 1 / 3;
border: 2px solid $color-dark;
grid-column-end: span 3;
&.keys-white {
border-width: 2px 1px;
background-color: white;
z-index: 10;
}
&.keys-black {
grid-row: 1 / 2;
background-color: $color-dark;
z-index: 100;
grid-column-end: span 2;
}
&#key-c {
border-left-width: 2px;
grid-column-start: 1;
}
&#key-d {
grid-column-start: 4;
}
&#key-e {
grid-column-start: 7;
}
/* [...] */
&#key-cis {
grid-column-start: 3;
}
&#key-dis {
grid-column-start: 6;
}
/* [...] */
}
}
}
解决方案
为了尊重 Safari 中的纵横比,您不仅需要声明 padding-bottom 值,还需要将高度设置为零。此外,将父 UL 元素设置为等于父 100% 高度。有了这两个附加值,它就像 safari 的魅力一样。请参阅下面的代码或codepen。
#keyboard {
/* maintain aspect ratio */
position: relative;
padding-bottom: 25%;
height: 0; // add this
> ul {
/* stretch ul to keyboard div */
position: absolute;
height: 100%; // add this
top: 0;
...
推荐阅读
- symfony - 如何在我的 Vue.js 应用程序中使用 twig 变量
- java - 如果在 mediaplayer.start() 之前调用 mediaplayer.pasue() ,则不播放音乐
- angular - 为什么我在使用任何“nx”命令时都会出错
- python - 在文本中查找并行单词的缩放问题(Python)
- python - Asyncio 不会运行通过多种可能方式中的任何一种安排的任务
- firebase - 有没有办法在 Firebase 函数中获取存储桶名称?
- elasticsearch - 如何使用 elasticsearch nest api 创建自定义分析器以忽略重音和 pt-br 停用词?
- python - 如何解析表示树状图的字典以创建另一个表示所有父节点和子节点的字典?
- android - Android GLSurfaceView,GL20 - 在 Renderer.onDrawFrame 中丢失约 15 毫秒
- javascript - 创建交互式表格 - HTML、CSS、JavaScript