表格计算器按钮对不齐，因td默认padding、border-spacing及vertical-align:baseline导致错位；须重置table/td样式、设border-collapse:collapse、vertical-align:middle，并统一input高度、font-size与line-height。

用 <table> 布局计算器按钮，为什么总对不齐？<p>因为 <code><table> 默认给 <code><td> 加了 <code>padding 和 border-spacing，单元格内容还会受字体行高、vertical-align 默认值（baseline）影响。直接写 <input type="button"> 进去，不同浏览器渲染高度不一致，尤其在 IE 或旧版 Safari 中更明显。

必须统一清除干扰项：

• table, td { padding: 0; margin: 0; border: none; }
• 加 border-collapse: collapse; 消除单元格间隙
• 所有 <td> 设 <code>vertical-align: middle;
• <input> 高度设为 100%，并显式定义 font-size 和 line-height（避免继承父级导致错位）

type="number" 能不能用在显示框？

不能。显示框要完整呈现表达式（比如 "2 + 3 * (4 - 1)"），而 type="number" 会自动过滤非数字字符，按下 +、(、= 等键时输入无效，Safari 下退格还可能清空整段。

正确做法是：

• 显示区用 <input type="text" id="display" readonly tabindex="-1">
• readonly 防止用户手动输入乱序
• tabindex="-1" 移出键盘焦点流，避免按 Tab 键时意外跳入

运算按钮该用 <input type="button"> 还是 <button></button>？

优先用 <input type="button">。老系统或强制兼容 IE8 的场景下，<button></button> 在 <td> 内容易被压扁、文字偏移，且部分旧引擎对 <code><button></button> 的默认样式重置不彻底。

关键细节：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 所有按钮的 value 属性必须是纯字符串（如 value="÷"），别用 HTML 实体（÷）——有些老浏览器解析失败
• 避免用 type="submit" 或 type="reset"，否则点击会触发表单提交，刷新页面
• 绑定事件统一用 onclick="append('+')" 这类内联方式最稳，比 addEventListener 在老旧环境兼容性更好

为什么点击“=”没反应或报错 Invalid left-hand side in assignment？

常见于直接拼接字符串后传给 eval()，但没做基础校验：空字符串、连续运算符（如 "2 ++ 3"）、结尾是运算符（如 "2 + "）都会让 eval 失败。

上线前至少加三道防护：

• 执行前用正则剔除多余空格：str.replace(/\s+/g, ' ').trim()
• 拒绝以运算符结尾：if (expr.endsWith('+') || expr.endsWith('-') || ...) 就不计算
• 用 try/catch 包住 eval，捕获错误后清空显示并提示 "Error"

真正难处理的是运算符优先级和括号匹配——如果项目要求严谨计算，eval 只能用于教学演示；生产环境该换用递归下降解析器或 mathjs 这类库。表格布局本身不解决逻辑问题，它只负责把按钮“摆整齐”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！