收藏
回答

?小程序开发平台WXSS样式表的针对低版本的向下兼容性问题?

我在另外一个帖子里提出的问题:WXSS样式表问题?为了验证到底是原书代码的失误还是微信小程序开发平台的向下兼容性问题,我下载了原书作者使用的小程序开发平台版本0.12.130400,将代码完整复制过去,测试结果和原书一致。见图一。
图一:0.12.130400测试结果截图 而在最新的stable 1.02.1910120版本上,测试结果就不对劲了,见下图二:
图二:1.02.1910120测试结果截图再次贴出相关的样式表代码看看:

/*外层容器*/
.content {
  height:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: 10rpx;
}
 
/*按钮组*/
.btnGroup {
  display: flex;
  flex-direction: row;
}
 
/*按钮*/
.item {
  width: 160rpx;
  min-height: 150rpx;
  margin:10rpx;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  border-radius: 5px;
  text-align: center;
  line-height: 150rpx;
}
 
/*按钮组*/
.btnGroup {
  display: flex;
  flex-direction: row;
}
 
/*按钮*/
.item {
  width: 160rpx;
  min-height: 150rpx;
  margin:10rpx;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  border-radius: 5px;
  text-align: center;
  line-height: 150rpx;
}

起关键作用的就是content样式里面的“align-items: center;”,将这句代码去掉吗,在新版本就正常了,但根据定义,”align-items“定义在交叉轴上如何对齐,源代码中的属性值center理论上因该是图三的效果。
图三:align-items:center; 而且无论是”flex-start | flex-end | center | baseline | stretch“这四种取值中的哪一种,其内含元素也不应该超出容器的边界吧? 再者说,原书的设计思路和代码也是正确的。
这是不是说明了小程序开发工具对低版本兼容性有问题呢?还是高版本的开发工具对align-items样式处理有问题


最后一次编辑于  2019-11-16
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容
问题标签