HTML+JS简易计算器负数显示异常：为何显示‘5-’而非‘-5’？

问题原因 #

你的计算器输入框（#input）设置了CSS属性 direction: rtl（从右到左排版）。当计算结果为负数时，负号会被RTL排版规则推到数字的右侧，导致显示成5-这类错误格式，但JavaScript层面的计算结果是完全正确的——只是显示时的排版方向搞反了符号位置。

修复方法 #

用text-align: right替代direction: rtl，这样既能保持数字靠右对齐的视觉效果，又不会打乱负数符号的正常位置：

修改#input的CSS代码：

#input{
  width:90%;
  height:90%;
  background-color:rgba(0, 0, 0, 0);    
  color:white;
  font-size: 15vw;
  /* 移除direction: rtl，替换为右对齐 */
  text-align: right;
  font-family: Helvetica, sans-serif;
}

额外说明 #

RTL属性是为阿拉伯语、希伯来语等从右到左书写的语言设计的，不适合用来实现普通计算器的数字右对齐需求，用text-align: right才是正确的做法。

内容的提问来源于stack exchange，提问作者GianG