Chrome/Edge中HTML计算器数字按钮无按压效果求助

看起来你的数字按钮（1-9）点击时没有按压反馈，而功能按钮正常工作，核心问题出在CSS语法错误和样式冗余上，我来帮你一步步解决：

问题根源分析 #

1. CSS语法错误：你给数字按钮对应的.doggy到.doggy8类里，margin-bottom属性写了两个冒号（margin-bottom: : 15px;）——这会导致浏览器解析这些样式时出现异常，甚至直接忽略部分规则，包括默认的按钮点击反馈效果。
2. 缺少统一的按压反馈样式：功能按钮的反馈可能是浏览器默认的active状态效果，但数字按钮因为CSS解析错误没触发，最好自定义统一的active状态来保证所有按钮反馈一致。
3. 样式冗余严重：所有按钮的基础样式（字体大小、背景色、圆角、边距）几乎完全重复，既增加维护成本，也容易引发样式冲突。

具体解决方案 #

1. 修复CSS语法错误 + 优化样式结构 #

把重复的按钮基础样式合并成一个通用类（比如.calc-btn），只针对特殊按钮定义差异化样式，同时修复所有语法错误：

/* 计算器容器样式 */
.rectangle {
  height: 400px;
  width: 500px;
  background-color: #F1C7C7;
  margin: auto;
  border: 3px solid green;
  position: relative; /* 让内部绝对定位按钮以容器为基准 */
}

/* 所有计算器按钮的基础样式 */
.calc-btn {
  font-size: 50px;
  background-color: #f44336;
  border-radius: 28%;
  margin: 15px;
  transition: all 0.1s ease; /* 添加平滑过渡动画 */
  border: none; /* 去掉默认边框，让样式更统一 */
  cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 功能按钮的差异化样式 */
.doggy9, .doggy10, .doggy11, .doggy12 {
  font-size: 40px;
  margin: 9px 15px;
}

.doggy13, .doggy14 {
  font-size: 25px;
  position: absolute;
  margin: 9px 15px;
}

.doggy15, .doggy16, .doggy17, .doggy18 {
  font-size: 10px;
  border-radius: 50%;
  position: absolute;
  margin: 9px 15px;
}

.doggy19, .doggy21, .doggy22, .doggy23 {
  font-size: 40px;
  border-radius: 50%;
  position: absolute;
  margin: 9px 15px;
}

.doggy20, .doggy24 {
  font-size: 15px;
  border-radius: 50%;
  position: absolute;
  margin: 9px 15px;
}

/* 显示区域样式 */
.dad {
  background-color: #D7F3F3;
  height: 100px;
  width: 450px;
  border-radius: 20%;
  margin: auto;
}

/* 分隔线样式 */
.vertical {
  border-left: 15px solid black;
  height: 300px;
  position: absolute;
  bottom: 173.3px;
  left: 687.5px;
}

/* 核心：按钮按压反馈样式 */
.calc-btn:active {
  background-color: #d32f2f; /* 点击时颜色加深 */
  transform: scale(0.95); /* 点击时轻微缩小，模拟按压感 */
}

2. 修改HTML，给所有按钮添加通用类 #

把所有按钮的class都加上.calc-btn，这样就能继承基础样式和按压反馈效果：

<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <link rel="stylesheet" type="text/css" href="Calculator.css">
</head>
<body>
  <h1>This is a Calculator!!!</h1>
  <div class="rectangle">
    <form>
      <div class="dad">
        <br>
        <input type="button" id="abcd" value="1" class="calc-btn doggy">
        <input type="button" id="abcd1" value="2" class="calc-btn doggy1">
        <input type="button" id="abcd2" value="3" class="calc-btn doggy2">
        </br>
        <input type="button" id="abcd3" value="4" class="calc-btn doggy3">
        <input type="button" id="abcd4" value="5" class="calc-btn doggy4">
        <input type="button" id="abcd5" value="6" class="calc-btn doggy5">
        </br>
        <input type="button" id="abcd6" value="7" class="calc-btn doggy6">
        <input type="button" id="abcd7" value="8" class="calc-btn doggy7">
        <input type="button" id="abcd8" value="9" class="calc-btn doggy8">
        <div class="vertical"></div>
      </div>
      <input type="button" id="abcd9" value="+" class="calc-btn doggy9">
      <input type="button" id="abcd13" value=&#x221a; class="calc-btn doggy13"> <!--Square root-->
      </br>
      <input type="button" id="abcd10" value="-" class="calc-btn doggy10">
      <input type="button" id="abcd14" value=&#x221B; class="calc-btn doggy14"> <!--Cube Root-->
      </br>
      <input type="button" id="abcd11" value=&#xd7; class="calc-btn doggy11"> <!--Multiplication-->
      <input type="button" id="abcd15" value="sin(x)" class="calc-btn doggy15">
      </br>
      <input type="button" id="abcd12" value=&#xf7; class="calc-btn doggy12"> <!--Division-->
      <input type="button" id="abcd16" value="cos(x)" class="calc-btn doggy16">
      <input type="button" class="calc-btn doggy17" id="abcd17" value="arcsin(x)">
      <input type="button" class="calc-btn doggy18" id="abcd18" value="arccos(x)">
      <input type="button" class="calc-btn doggy19" id="abcd19" value="n!">
      <input type="button" class="calc-btn doggy20" id="abcd20" value="ln(n)">
      <input type="button" class="calc-btn doggy21" id="abcd21" value="1/x">
      <input type="button" class="calc-btn doggy22" id="abcd22" value="%">
      <button class="calc-btn doggy23" id="abcd23">a<sup>x</sup></button>
      <button class="calc-btn doggy24" id="abcd24">log<sub>a</sub>x</button>
    </form>
  </div>
</body>
</html>

额外小提示 #

• 后续绑定JS函数时，可以通过document.getElementById获取按钮，添加click事件监听，实现数字输入和计算功能。
• 绝对定位的按钮现在以.rectangle为基准，页面缩放时位置不会乱飘，比之前的固定坐标更稳定。

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