时间戳

首页 > 解决方案 > 对齐设置为基线时，CSS网格项目在macOS Safari中不填充宽度

html - 对齐设置为基线时，CSS网格项目在macOS Safari中不填充宽度

问题描述

我对仅在 macOS Safari 上出现的 CSS 网格布局有疑问（在 v13.1 上测试）。以下代码段应生成 alabel和 a textfield- ，后者延伸到div容器的整个宽度。这适用于 Chrome 和 Firefox，但 Safari 不会这样做。有趣的是，布局在调整窗口大小时会卡入到位，但在聚焦文本字段时会再次中断。

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        body {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        div {
            background-color: lightcoral;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: baseline;
        }
    </style>
</head>
<body>

<div>
    <label>Label</label>
    <input type="text" placeholder=" ">
</div>

</body>
</html>

代码笔

从标签中删除displayoroverflow属性时，body网格布局按预期工作。但是在发生此问题的环境中，这两个属性都是必需的。因此，无法通过删除这些属性来解决问题。当更改align-items为除baseline. 不幸的是baseline，对齐也是所需布局的关键。

这种行为对我来说似乎是 Safari 中的一个错误，但我想征求第二意见。如果有解决方案，如果您能分享，我会很高兴。

顺便说一句：placeholder带有单个空格字符的空字符已经是baselineSafari 中对齐的修复。没有它，空文本字段将在底部对齐，而不是它们的baseline.

标签： htmlcsssafari

解决方案

您不需要align-items: baseline对齐标签和输入。只需重置输入的样式就可以了。

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.group {
  background-color: lightcoral;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
}

input {
  padding: 0;
  outline: 0;
  -webkit-appearance: none;
  border: 0;
}
<html>
<head>
  <title>Test</title>
</head>
<body>
<div class="group">
  <label>Label</label>
  <input type="text">
</div>
</body>
</html>

推荐阅读