Html 框尺寸：边框框不在镀铬/边缘镀铬中工作

我有几个表（因为它们在vue组件中扭曲，我无法将它们放在一个表中），在使用各种边框时，需要对齐表单元格。在Firefox上，使用

框大小：边框框

可以很好地实现这一点，但Chrome或Edge Chrome上的相同代码将不对齐

这是我的密码：

这是我的css：

。垂直分隔符{
左边框：2倍实心；
}
.cell-th2-4{
最小宽度：3.6em；
文本对齐：居中；
框大小：边框框；
左边框：2倍实心；
右边框：2倍实心；
}
.cell-th2-3{
最小宽度：2.7em；
文本对齐：居中；
框大小：边框框；
左边框：2倍实心；
右边框：2倍实心；
}
第四单元{
最小宽度：0.9em；
文本对齐：居中；
框大小：边框框；
}
.cell4：第一个孩子{
左边框：2倍实心；
}
.cell4:最后一个孩子{
右边框：2倍实心；
}
桌子{
边界间距：0；
边界塌陷：塌陷；
表布局：固定；
框大小：边框框；
}
运输署{
填充：0；
边框：1px实心；
溢出：隐藏；
框大小：边框框；
}
tr{
空白：nowrap；
高度：1.5em；
框大小：边框框；
}

这是我的-如果您在Firefox中打开它，它会很好地对齐：

在铬/铬边缘列中打开的I将不对齐，如下所示：

---

对此我能做些什么？

我想我已经解决了：问题不在于

边框框

，而在于

最小宽度

相关，因为大多数浏览器（仍然）似乎对表格单元格实施得很差

检查笔记。在Firefox（和Opera）中，它说：CSS 2.1没有定义min width With table的行为。Firefox支持将最小宽度应用于表元素。。可能与“其他浏览器没有”一样

因此，您在Firefox和Chrome/Edge上所体验到的不同

对我来说，这意味着您必须解决

minwidth

的问题，以获得一些跨浏览器兼容性

如果可能的话，我会说：移除顶部的

，将其

移动到底部

，并使用好的旧内联

colspan

，避免问题

如下面的代码片段（请确保仔细考虑其中的各种注释！尤其是使用

.cell4

）

在最新的Chrome/Edge、IE11和Firefox W10上进行了测试

/*使用此选项*/
表，表*{框大小：边框框}
/*或者将其用于整个页面。惯例*/
html{-webkit框大小：边框框；框大小：边框框}
*，*：之前，*：之后{-webkit框大小：继承；框大小：继承}
/*删除了下面的所有“边框框”设置，以便于维护*/
.垂直分离器{
左边框：2倍实心；
}
.cell-th2-3，/*已添加*/
.cell-th2-4{
/*最小宽度：3.6em；/*移除*/
文本对齐：居中；
左边框：2倍实心；
右边框：2倍实心；
}
/*全部删除
.cell-th2-3{
最小宽度：2.7em；
文本对齐：居中；
左边框：2倍实心；
右边框：2倍实心；
}
*/
第四单元{
最小宽度：0.9em；
/*有问题！！！Firefox:14.4px Chrome/Edge 15px。
-浏览器默认字体大小怪癖？
-浏览器内部边界像素舍入？
*/
文本对齐：居中；
}
.cell4：第一个孩子{
左边框：2倍实心；
}
.cell4:最后一个孩子{
右边框：2倍实心；
}
桌子{
边界间距：0；
边界塌陷：塌陷；
表布局：固定；
}
运输署{
填充：0；
边框：1px实心；
溢出：隐藏；
}
tr{
空白：nowrap；
高度：1.5em；
}

当我使用firefox和Chrome/Chrome Edge时，我看不出有什么不同。你能分享一下你观察到的差异的截图吗？我想这可能与边界坍塌有关。也许这个答案有用哈，单元格大小也有差异，但这可能是因为我的浏览器默认的字体大小设置。看看这个……科尔斯潘绝对是个好办法，谢谢！为了保持项目的组件结构，我需要使用几个表。为此，我在每个“头表”中引入了一个“不可见”的伪tr。这里的例子：@Alexander Remesch，很酷你有一个解决方案。不幸的是，您发布的新示例Fiddle具有原始代码…抱歉，我将更新的代码放在这里：