我在另外一个帖子里提出的问题: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 : 10 rpx; } /*按钮组*/ .btnGroup { display : flex; flex- direction : row; } /*按钮*/ .item { width : 160 rpx; min-height : 150 rpx; margin : 10 rpx; text-shadow : 0 1px 1px rgba( 0 , 0 , 0 , 0.3 ); border-radius: 5px ; text-align : center ; line-height : 150 rpx; } /*按钮组*/ .btnGroup { display : flex; flex- direction : row; } /*按钮*/ .item { width : 160 rpx; min-height : 150 rpx; margin : 10 rpx; text-shadow : 0 1px 1px rgba( 0 , 0 , 0 , 0.3 ); border-radius: 5px ; text-align : center ; line-height : 150 rpx; } |
起关键作用的就是content样式里面的“align-items:
center
;
”,将这句代码去掉吗,在新版本就正常了,但根据定义,”align-items
“定义在交叉轴上如何对齐,源代码中的属性值center理论上因该是图三的效果。
图三:align-items:center;
而且无论是”flex-start | flex-end | center | baseline | stretch“这四种取值中的哪一种,其内含元素也不应该超出容器的边界吧?
再者说,原书的设计思路和代码也是正确的。
这是不是说明了小程序开发工具对低版本兼容性有问题呢?还是高版本的开发工具对align-items样式处理有问题
你好,
0.12.130400 是比较老的 chrome 版本,应该是 chrome 53
1.02.1910120 是 chrome 74
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)