我在另外一个帖子里提出的问题：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样式处理有问题

学习书籍：从零开始学微信小程序开发 实现计算器功能，原书代码如下： 1、WXSS [代码]/* pages/cal/cal.wxss */[代码][代码]/*外层容器*/[代码][代码].content {[代码][代码]  [代码][代码]height[代码][代码]:[代码][代码]100%[代码][代码];[代码][代码]  [代码][代码]display[代码][代码]:flex;[代码][代码]  [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码]  [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]  [代码][代码]box-sizing: border-box;[代码][代码]  [代码][代码]padding-top[代码][代码]: [代码][代码]10[代码][代码]rpx;[代码][代码]}[代码] [代码]/*计算结果*/[代码][代码].[代码][代码]screen[代码] [代码]{[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#ffffff[代码][代码];[代码][代码]  [代码][代码]text-align[代码][代码]: [代码][代码]right[代码][代码];[代码][代码]  [代码][代码]width[代码][代码]:[代码][代码]650[代码][代码]rpx;[代码][代码]  [代码][代码]height[代码][代码]:[代码][代码]150[代码][代码]rpx;[代码][代码]  [代码][代码]line-height[代码][代码]: [代码][代码]150[代码][代码]rpx;[代码][代码]  [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]20[代码][代码]rpx;[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]30[代码][代码]rpx;[代码][代码]  [代码][代码]border[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]#ddd[代码][代码];[代码][代码]  [代码][代码]border-radius: [代码][代码]3px[代码][代码];[代码][代码]}[代码] [代码]/*按钮组*/[代码][代码].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;[代码][代码]}[代码] [代码]/*控制按钮 橙色*/[代码][代码].orange {[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#f78d1d[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]:[代码][代码]#fef4e9[代码][代码];[代码][代码]  [代码][代码]border[代码][代码]:[代码][代码]solid[代码] [代码]1px[代码] [代码]#da7c0c[代码][代码];[代码][代码]}[代码] [代码]/*数字按钮蓝色*/[代码][代码].[代码][代码]blue[代码] [代码]{[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#0095cd[代码][代码];[代码][代码]  [代码][代码]color[代码][代码]:[代码][代码]#d9eef7[代码][代码];[代码][代码]  [代码][代码]border[代码][代码]:[代码][代码]solid[代码] [代码]1px[代码] [代码]#0076a3[代码][代码]}[代码] [代码]/*数字按钮按下状态*/[代码][代码].button-hover-num {[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#0094cc[代码][代码];[代码][代码]  [代码][代码]opacity:[代码][代码]0.7[代码][代码];[代码][代码]}[代码] [代码]/*控制按钮按下状态*/[代码][代码].other-button-hover {[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]red[代码][代码];[代码][代码]}[代码]2、WXML [代码]<!--pages/cal/cal.wxml-->[代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"content"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"screen"[代码][代码]>计算结果</[代码][代码]view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"btnGroup"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>历史</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>C</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>-</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>÷</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"btnGroup"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>7</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>8</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>9</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>×</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"btnGroup"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>4</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>5</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>6</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>-</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"btnGroup"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>1</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>2</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>3</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>+</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"btnGroup"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>±</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item blue"[代码] [代码]hover-class[代码][代码]=[代码][代码]"button-hover-num"[代码][代码]>0</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>.</[代码][代码]button[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"item orange"[代码] [代码]hover-class[代码][代码]=[代码][代码]"other-button-hover"[代码][代码]>=</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码]模拟器显示如下：[图片]和书中描述不一致，请问，是开发工具兼容性的问题么？

环境：     OS：Windows 10 专业版 1903 64位     小程序开发工具版本：stable 1.02.1910120 问题描述： 学习小程序开发，加法计算器，在模拟器中input组件无法捕获bindinput事件，在iOS端微信就可以。 以下代码，在模拟器端无法捕获bindinput，无论输入什么计算结果都是零，在iOS端就可以得出正确的计算结果。 代码：     1、cal.wxml [代码]<!--pages/cal/cal.wxml-->[代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"container"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]input[代码] [代码]placeholder[代码][代码]=[代码][代码]"被加数"[代码] [代码]bindinput[代码][代码]=[代码][代码]"bindInput1"[代码][代码]/>[代码][代码]  [代码][代码]<[代码][代码]input[代码] [代码]placeholder[代码][代码]=[代码][代码]"加数"[代码] [代码]bindinput[代码][代码]=[代码][代码]"bindInput2"[代码][代码]/>[代码][代码]  [代码][代码]<[代码][代码]button[代码] [代码]type[代码][代码]=[代码][代码]"primary"[代码] [代码]bindtap[代码][代码]=[代码][代码]"bindAdd"[代码][代码]>计算</[代码][代码]button[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]input[代码] [代码]placeholder[代码][代码]=[代码][代码]"结果"[代码] [代码]value[代码][代码]=[代码][代码]"{{result}}"[代码] [代码]disabled/>[代码][代码]</[代码][代码]view[代码][代码]>[代码]    2、cal.wxss [代码]/* pages/cal/cal.wxss */[代码][代码].container {[代码][代码]  [代码][代码]justify-[代码][代码]content[代码][代码]: flex-start;[代码][代码]  [代码][代码]padding[代码][代码]: [代码][代码]30[代码][代码]rpx [代码][代码]0[代码][代码];[代码][代码]}[代码] [代码].container input{[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#eee[代码][代码];[代码][代码]  [代码][代码]border-radius: [代码][代码]3px[代码][代码];[代码][代码]  [代码][代码]text-align[代码][代码]: [代码][代码]left[代码][代码];[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]720[代码][代码]rpx;[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]100[代码][代码]rpx;[代码][代码]  [代码][代码]line-height[代码][代码]: [代码][代码]100[代码][代码]rpx;[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]20[代码][代码]rpx[代码][代码]}[代码] [代码].container buton{[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]80%[代码][代码]}[代码]    3、cal.js [代码]// pages/cal/cal.js[代码][代码]Page({[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 页面的初始数据[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]num1: [代码][代码]""[代码][代码], [代码][代码]//被加数[代码][代码]    [代码][代码]num2: [代码][代码]""[代码][代码], [代码][代码]//加数[代码][代码]    [代码][代码]result: [代码][代码]""[代码] [代码]//结果[代码][代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 生命周期函数--监听页面加载[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onLoad: [代码][代码]function[代码][代码](options) {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 生命周期函数--监听页面初次渲染完成[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onReady: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 生命周期函数--监听页面显示[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onShow: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 生命周期函数--监听页面隐藏[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onHide: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 生命周期函数--监听页面卸载[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onUnload: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 页面相关事件处理函数--监听用户下拉动作[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onPullDownRefresh: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 页面上拉触底事件的处理函数[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onReachBottom: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]/**[代码][代码]   [代码][代码]* 用户点击右上角分享[代码][代码]   [代码][代码]*/[代码][代码]  [代码][代码]onShareAppMessage: [代码][代码]function[代码][代码]() {[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]bindAdd: [代码][代码]function[代码][代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]r = [代码][代码]this[代码][代码].data.num1 * 1 + [代码][代码]this[代码][代码].data.num2 * 1;[代码][代码]    [代码][代码]console.log(r);[代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]result: r[代码][代码]    [代码][代码]});[代码][代码]  [代码][代码]},[代码] [代码]  [代码][代码]bindInput1: [代码][代码]function[代码][代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]n = e.detail.value;[代码][代码]    [代码][代码]console.log(n);[代码][代码]    [代码][代码]if[代码] [代码](!isNaN(n)) {[代码][代码]      [代码][代码]this[代码][代码].setData({[代码][代码]        [代码][代码]num1: n[代码][代码]      [代码][代码]});[代码] [代码]    [代码][代码]};[代码][代码]  [代码][代码]},[代码] [代码]  [代码][代码]bindInput2: [代码][代码]function[代码][代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]n = e.detail.value;[代码][代码]    [代码][代码]console.log(n);[代码][代码]    [代码][代码]if[代码] [代码](!isNaN(n)) {[代码][代码]      [代码][代码]this[代码][代码].setData({[代码][代码]        [代码][代码]num2: n[代码][代码]      [代码][代码]});[代码] [代码]    [代码][代码]};[代码][代码]  [代码][代码]}[代码][代码]})[代码]模拟器计算结果截图：[图片] ios端微信运行小程序计算结果截图：[图片]