如何让我的网格布局在 Safari 中工作

Question

我构建了一个代表钢琴键盘的保持纵横比的简单网格布局。它在 firefox 和 chrome 中运行良好，但在 safari 中表现平平，因为它没有填充可用的垂直 space（见屏幕截图）。

Chrome/Firefox:

野生动物园：

知道为什么会这样吗？我该如何解决？我在 google 上搜索了很多，发现了很多关于 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;
            }

            /* [...] */
        }
    }
}

Answer 1

为了遵守 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;
...

如何让我的网格布局在 Safari 中工作

How can I get my grid layout to work in Safari

html

css

safari

grid-layout

css-grid