taro开发中css样式一样,但是显示出来的高度却不一样

taro开发中css样式一样,但是显示出来的高度却不一样

  • 问题描述
  • 问题发现以及分析
  • 解决问题

问题描述

在这个标签内,我使用了三个View作为border来分割小的单元块,样式是一样的
taro开发中css样式一样,但是显示出来的高度却不一样_第1张图片
经过DOM渲染后,样式也是一样的,但是渲染出来的视觉效果却是高度不同
taro开发中css样式一样,但是显示出来的高度却不一样_第2张图片taro开发中css样式一样,但是显示出来的高度却不一样_第3张图片taro开发中css样式一样,但是显示出来的高度却不一样_第4张图片
粗细线条都显示高度为1.5px

问题发现以及分析

taro开发中css样式一样,但是显示出来的高度却不一样_第5张图片
我发现单独的单元格的高度应该是44px,但是渲染出来的却是43.98px,触发了flex布局自动挤压元素保持布局不变,这时候我考虑是不是元素过高挤压容器,容器高度181px,单元格高度44px,
181-44*4=5,超高挤压了border 的高度
taro开发中css样式一样,但是显示出来的高度却不一样_第6张图片

解决问题

将容器高度减去单元格高度,除以border的个数,最后发现1.3px左右,我写的是1.5px,原因是元素高度合超过的容器高度,触发了flex布局的机制,自动挤压一部分元素保持布局的完整性。
将border高度1.5px改成1.3px,问题完美解决
taro开发中css样式一样,但是显示出来的高度却不一样_第7张图片

你可能感兴趣的:(taro-多端开发)