html - 按钮导致输入字段在悬停时向上移动(在 chrome 上)

Question

每当我将鼠标移到其中一个输入字段上时，它都会上升一点，但这不会发生在 firefox 上，只有 chrome。

这是问题的一个片段。

span {
  margin-right: 10px;
  position: relative;
}

.add__container1 {
  margin: 0 auto;
  text-align: center;
  margin-top: 10vh;
  position: relative;
}

.Exponent-1,
.Exponent-2,
.Exponent-3 {
  position: absolute;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  width: 15px;
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
  bottom: 20px;
}

.Operator2,
.Operator1 {
  color: inherit;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  /*padding: 12px 15px;*/
  margin-right: 10px;
  border-radius: 5px;
  transition: border 0.3s;
  outline: none;
  border: 1px solid black;
}

.r1s-delete-btn {
  font-size: 35px;
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  display: inline-block;
}

.r1s-delete-btn:active {
  transform: translateY(2px);
}

.r1s-delete-btn:focus {
  outline: none;
}

.up-arrow-btn:focus,
.down-arrow-btn:focus {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

<div class="add__container1">
  <button class="r1s-delete-btn"><ion-icon name="close-circle-outline"></ion-icon></button>

  <span class="span">____
     <input type="number" placeholder="" class="Exponent-1">
   </span>

  <select class="Operator1">
    <option value="+" selected>+</option>
    <option value="-">-</option>
    <option value="*">x</option>
    <option value="/">/</option>
  </select>
  <span class="span">____
     <input type="number" placeholder="" class="Exponent-2">
   </span>

  <select class="Operator2">
    <option value="+" selected>+</option>
    <option value="-">-</option>
    <option value="*">x</option>
    <option value="/">/</option>
  </select>
  <span class="span">____
     <input type="number" placeholder="" class="Exponent-3">    
   </span>
  <span>=</span>
</div>
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>

这是它的 jsfiddle 的链接 https://jsfiddle.net/JohnDipiazza/ykq724xf/26/

当我移除按钮时，问题不再发生，但我真的需要那个按钮......

任何帮助表示赞赏。

Answer 1

我通过使 .span 父元素 display: inline-block 来解决这个问题。

<span class="span">____
  <input type="number" placeholder="" class="Exponent-1">
</span>

span {
  margin-right: 10px;
  position: relative;
  display: inline-block;
}

.add__container1 {
  margin: 0 auto;
  text-align: center;
  margin-top: 10vh;
  position: relative;
}

.Exponent-1,
.Exponent-2,
.Exponent-3 {
  position: absolute;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  width: 15px;
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
  bottom: 20px;
}

.Operator2,
.Operator1 {
  color: inherit;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  /*padding: 12px 15px;*/
  margin-right: 10px;
  border-radius: 5px;
  transition: border 0.3s;
  outline: none;
  border: 1px solid black;
}

.r1s-delete-btn {
  font-size: 35px;
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  display: inline-block;
}

.r1s-delete-btn:active {
  transform: translateY(2px);
}

.r1s-delete-btn:focus {
  outline: none;
}

.up-arrow-btn:focus,
.down-arrow-btn:focus {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

<div class="add__container1">
  <button class="r1s-delete-btn"><ion-icon name="close-circle-outline"></ion-icon></button>

  <span class="span">____
     <input type="number" placeholder="" class="Exponent-1">
   </span>

  <select class="Operator1">
    <option value="+" selected>+</option>
    <option value="-">-</option>
    <option value="*">x</option>
    <option value="/">/</option>
  </select>
  <span class="span">____
     <input type="number" placeholder="" class="Exponent-2">
   </span>

  <select class="Operator2">
    <option value="+" selected>+</option>
    <option value="-">-</option>
    <option value="*">x</option>
    <option value="/">/</option>
  </select>
  <span class="span">____
     <input type="number" placeholder="" class="Exponent-3">    
   </span>
  <span>=</span>
</div>
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>

jsFiddle