Svelte表格移动端行高异常问题求助

核心问题 #

你的座位表格存在HTML结构不规范问题：<tr>标签内直接嵌套了<div class="block">元素，而根据HTML规范，<tr>的直接子元素只能是<td>或<th>。桌面浏览器容错性较强，能兼容这种不规范结构，但移动端Safari（iPhone 7、iPad Air 5均使用该内核）对表格结构的解析更为严格，导致行高被异常拉伸。

修复步骤 #

1. 修正表格结构，替换违规的<div>为<td> #

将表格中所有的<div class="block"></div>替换为<td class="block"></td>，保证表格结构符合规范：

<table id="seat-table">
    <tbody>
        {#each ['A', 'B', 'C', 'D'] as rowLetter}
            <tr>
                {#each [1, 2, 3] as rowSeat}
                    <Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} />
                {/each}

                <td class="block"></td>

                {#each [4, 5, 6] as rowSeat}
                    <Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} />
                {/each}

                <td class="block"></td>

                {#each [7, 8, 9] as rowSeat}
                    <Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} />
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

2. 调整.block样式，适配表格单元格特性 #

修改.block的CSS，重置表格单元格默认的内边距与边框，同时保持正方形尺寸：

#seat-table {
    width: 100%;
    border-collapse: collapse;
}

.block {
    width: 50px;
    aspect-ratio: 1/1;
    padding: 0;
    border: none;
}

3. 兼容老版本Safari的正方形按钮（可选） #

iPhone 7搭载的iOS版本可能不支持aspect-ratio属性，可通过padding-top技巧替代，确保座位按钮始终为正方形：
修改Seat组件的.seat样式：

.seat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    padding-top: 100%;
    border-radius: 0.3rem;
    cursor: pointer;

    img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    &:hover {
        transform: scale(1.1);
    }
}

验证 #

完成上述修改后，移动端Safari将能正确解析表格结构，行高会恢复正常，同时保持桌面端的缩放效果不变。

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