边缘问题：CSS 网格单元格中的高度 100% 获得 100% 宽度的值

Question

我正在尝试使用 CSS 网格将标题/标题区域中的一些文本垂直和水平居中，并使该区域（和整个布局）具有一定的灵活性/响应性。

我在code pen 中设置了一个简单的示例，但如果您不想去那里，示例中的 HTML 和 CSS 是这样的：

<div class='layout'>
  <div class='titleArea'>
    <svg viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'>
      <text x='50%' y='60%' textAnchor='middle' dy='0.07em' class='titleText'>
        Hello World
      </text>
    </svg>
  </div>
  <div class='mainArea'>
  </div>
</div>

还有这个：

.layout {
  height: 400px;
  border: 1px solid red;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
  grid-template-columns: 1fr;
  grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
}
.titleArea {
  border: 1px solid blue;
  width: 100%;
  -ms-grid-row: 1;

  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  svg {
    height: 100%;
    width: 100%;
    /* uncomment line below to see text centering work in Edge */
    /* max-height: 80px; */
    justify-self: center;
    align-self: center;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
}
.titleText {
  font-size: 2.5em;
}
.mainArea {
  border: 1px solid green;
}

居中和弯曲在笔中完全工作，但它非常接近，当然如果在 Edge 中查看，问题会变得很明显。

如果我打开一些开发工具并查看发生了什么，height: 100% 的计算结果不是作为父容器的高度，而是与为 width: 100% 计算的值相匹配，这使得文本呈现巨大且它完全脱离了父容器。如果我将max-height 值设置为我期望的弯曲范围内的某个值，它会控制所有内容并且文本最终会出现在它应该的位置，但是它会被冻结在那个大小并且不会巧妙地缩小/增长随着视口的变化。

是否有一些解决方法，或者这是 Edge 中的一个合法错误？

上述设置在 Chrome、Firefox 甚至 IE 11 中运行良好，仅在 Edge 中存在问题。

Answer 1

我已经在我的机器上重现了这个问题，似乎这个问题与SVG元素的x和y属性有关，它将基于整个页面设置文本基线的起点，而不是SVG 元素。这可能是某种错误，或者是 Edge 默认行为。我将尝试提交有关此问题的反馈。

作为一种解决方法，我建议您可以尝试更改CSS units，例如“px”。你可以修改你的代码如下：

<style>
    .layout {
        height: 400px;
        border: 1px solid red;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: minmax(80px, 1fr) minmax(200px, 3fr);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(80px, 1fr) minmax(200px, 3fr);
    }

    .titleArea {
        border: 1px solid blue;
        width: 100%;
        -ms-grid-row: 1;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        text-align: center;
    }

        .titleArea svg {
            height: 100%;
            width: 100%;
            /* uncomment line below to see text centering work in Edge */
            /* max-height: 80px; */
            justify-self: center;
            align-self: center;
            -ms-grid-column: 1;
            -ms-grid-row: 1;
        }

    .titleText {
        font-size: 20px;
    }

    .mainArea {
        border: 1px solid green;
    }
</style>
<div class='layout'>
    <div class='titleArea'>
        <svg width="100%" height="100" preserveAspectRatio='xMidYMid meet'>
            <text x='50%' y='50' textAnchor='middle' dy='0.07em' class='titleText'>
                Hello World
            </text>
        </svg>
    </div>
    <div class='mainArea'>
    </div>
</div>

结果如下（使用Microsoft Edge 44.18362.387.0版本）：