CSS表格单元格错误地继承了十进制值

在一个web应用程序项目中，我遇到了一个特殊的实例，在这个实例中，我将父元素的

width

定义为一个计算值（特别是与sass变量值的纵横比）。直接子对象的

宽度

设置为

继承

，但似乎截断了小数点后的所有内容，只留下了一个像素差的一小部分。似乎只有当子项的

显示

值设置为

表格单元格

时才会出现这种情况，我希望保留该值，以便在所有浏览器中都支持居中的文本（如中所示）

除了将计算值四舍五入为整数或将值显式设置为“幻数”，还有更好的解决方案吗

我当前的解决方案是将父对象的宽度设置为

ceil（#{$My start value}*16/9）

（使用），并将子对象的宽度保持为

inherit

.parent{
高度：100px；
宽度：计算（100px*16/9）；
背景色：番茄；
}
.孩子{
身高：继承；
宽度：继承；
文本对齐：居中；
垂直对齐：中间对齐；
显示：表格单元格；
背景色：hsl（0,0,95%）；
}

我的多行（有点长）居中文本

像素不能被分解成比特1778很可能会变成178px。1像素是屏幕上的一个点：（我明白了，但这仍然不能解释准确的值是如何不准确地传递给子元素的。一个元素读作

177.766px

，而另一个元素读作

177px

，当它们应该引用相同的值时。检查浏览器开发工具中的元素，如果您愿意的话。可能是浏览器问题，正如它所显示的那样。）在safari 10中，父母和孩子都是178px。1@LouieBertoncin并非将值不准确地传递给子对象。在Chrome中，由于某些原因，

table-*

的所有内容都无法完全感知亚像素。您可以通过将

display:table

添加到父对象并检查父对象的宽度来验证这一点（现在应该四舍五入）。还请记住，当使用

display:table cell

时，width属性完全无效，除非您在父项上设置

display:table

和

table layout:fixed

。不幸的是，我无法从官方来源引用，也无法对此提供快速修复，所以我只需将我的两美分作为注释。@Marvin haha，是的h、 这正是我所希望的情况。只是另一个尴尬的边缘情况。耶，网络开发！似乎最好的解决方案是我目前使用的

ceil

解决方案。像素不能分解为位177778可能会变成178px。1像素是屏幕上的一个点：（我明白了，但这仍然不能解释准确的值是如何不准确地传递给子元素的。一个元素读作

177.766px

，而另一个元素读作

177px

，当它们应该引用相同的值时。检查浏览器开发工具中的元素，如果您愿意的话。可能是浏览器问题，正如它所显示的那样。）在safari 10中，父母和孩子都是178px。1@LouieBertoncin并非将值不准确地传递给子对象。在Chrome中，由于某些原因，

table-*

的所有内容都无法完全感知亚像素。您可以通过将

display:table

添加到父对象并检查父对象的宽度来验证这一点（现在应该四舍五入）。还请记住，当使用

display:table cell

时，width属性完全无效，除非您在父项上设置

display:table

和

table layout:fixed

。不幸的是，我无法从官方来源引用，也无法对此提供快速修复，所以我只需将我的两美分作为注释。@Marvin haha，是的h、 我希望不是这样。只是另一个尴尬的边缘案例。耶，网络开发！似乎最好的解决方案是我目前正在使用的

ceil

。