Blazor中表格1像素行高效果失效问题求助

核心原因大概率是这几点： #

• Blazor的CSS隔离机制：Blazor组件默认启用CSS隔离，你写的样式如果在组件的.razor.css文件里，可能因为组件的作用域前缀（比如b-xxxxxx）没匹配到表格元素，导致样式失效；如果是全局样式，也可能被组件内的隔离样式或Blazor自带的基础样式覆盖。
• 框架默认样式优先级：Blazor项目通常会引入Bootstrap之类的基础样式库，这些库的表格默认样式（比如tr的行高、td的内边距）优先级可能比你加的!important还高，或者你的样式选择器不够具体。
• 图片渲染的隐性问题：用1px图片做分隔线时，浏览器可能因为图片基线对齐、空白折叠等特性撑开行高，Blazor的DOM渲染逻辑可能放大了这个问题。

更可靠的替代方案（放弃图片，用纯CSS实现） #

别再依赖图片了，纯CSS实现1px行分隔线更稳定，还能避开Blazor的样式坑：

1. 给表格加个专属类名，确保样式精准命中：

<table class="thin-line-table">
    <!-- 表格内容 -->
</table>

2. 编写对应CSS（全局样式放wwwroot/css/site.css，组件内样式用:deep()穿透隔离）：

.thin-line-table {
    border-collapse: collapse;
}
.thin-line-table tr {
    border-bottom: 1px solid #ddd; /* 分隔线颜色可自行调整 */
}
/* 可选：去掉最后一行的分隔线 */
.thin-line-table tr:last-child {
    border-bottom: none;
}
/* 重置单元格内边距，避免行高被撑开 */
.thin-line-table td {
    padding: 0;
    line-height: 1;
}

若坚持用图片方案的排查步骤： #

• 打开浏览器F12开发者工具，查看tr、td、img的实际样式，看哪些自定义样式被划掉，定位覆盖来源。
• 给图片强制设置块级显示：img { display: block; height: 1px; width: 100%; margin: 0; padding: 0; }，避免基线对齐导致的额外高度。
• 若是CSS隔离导致样式不生效，在组件的.razor.css里用:deep()穿透：

:deep(.separator-img) {
    height: 1px;
    margin: 0;
    padding: 0;
    display: block;
}

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