Mac端Safari下Next.js项目GridInput组件CSS样式异常求助

问题诱因 #

1. Safari对flex布局容器下的直接grid子元素高度计算存在原生兼容缺陷：你的外层.settings容器为flex-direction: column的flex布局，内部的GridHeader、表单、GridBody均为直接子元素且采用grid布局，Safari无法正确传递基于min-height的高度基准，导致grid内部子项设置的height: 100%失效，出现高度坍塌、边框错位的问题。
2. 仅为grid容器设置min-height时，Safari不会将其识别为子元素高度继承的合法基准，必须显式设置height属性才能正常传递高度。
3. grid布局设置justify-items: center同时子项设置width: 100%时，Safari会出现宽度计算偏差，导致边框被挤压隐藏。

修复方案 #

第一步：统一修改grid容器配置 #

找到所有grid布局容器（.form、.header、.container），修改配置如下：

/* 以.form为例，其余两个grid容器做相同修改 */
.form {
    display: grid;
    grid-template-columns: 70% 20% 10%;
    align-items: stretch;
    /* 把justify-items从center改为stretch，适配子项100%宽度 */
    justify-items: stretch;
    width: 100%;
    /* 显式设置height，可保留min-height做降级 */
    height: 3rem;
    min-height: 3rem;
    background: #1f1f23;
}

第二步：优化输入框样式适配 #

修改对应样式类，避免高度继承和盒模型问题：

.input {
    width: 100%;
    /* 移除height:100%，改用flex布局对齐内容+padding撑高 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.8rem 0;
    background: #1f1f23;
    border-top: 3px solid #2b2c31fb;
    border-right: 3px solid #2b2c31fb;
    text-align: center;
    position: relative;
    font-size: 1rem;
}
/* 新增Safari输入框默认样式重置 */
input {
    -webkit-appearance: none;
    border-radius: 0;
}
/* 给.input_info增加盒模型声明，避免padding撑宽 */
.input_info {
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
    background: #1f1f23;
    overflow: visible;
}

修改后即可兼容Mac端Safari，样式和Chrome、Firefox表现一致。

内容的提问来源于stack exchange，提问作者Puriice