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

CSS表格单元格错误地继承了十进制值,css,sass,rounding,calc,truncated,Css,Sass,Rounding,Calc,Truncated,在一个web应用程序项目中,我遇到了一个特殊的实例,在这个实例中,我将父元素的width定义为一个计算值(特别是与sass变量值的纵横比)。直接子对象的宽度设置为继承,但似乎截断了小数点后的所有内容,只留下了一个像素差的一小部分。似乎只有当子项的显示值设置为表格单元格时才会出现这种情况,我希望保留该值,以便在所有浏览器中都支持居中的文本(如中所示) 除了将计算值四舍五入为整数或将值显式设置为“幻数”,还有更好的解决方案吗 我当前的解决方案是将父对象的宽度设置为ceil(#{$My start v

在一个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