在 Firefox 上放大或缩小后，单选按钮正在改变大小答案

【问题标题】：radio button is changing size following zoom in or out on firefox在 Firefox 上放大或缩小后，单选按钮正在改变大小
【发布时间】：2019-12-18 09:33:11
【问题描述】：

我遇到这种情况，我的 HTML 页面上的单选按钮会在仅在 firefox 上放大或缩小后改变大小（在 chrome 中不会发生）。

当我的页面处于他的默认大小 (100%) 时，它看起来像 this

当我的页面大小为 100% ++ 时，单选按钮会变小，例如 this

当我的页面大小为 100% 时 - 单选按钮变大，例如 this

HTML：

 <span class="value"><span class="" style=""><input type="radio"  name="80" id="radio80~1" value="1" onchange=""><label class="inline"  for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span><span class="" style=""><input type="radio"  name="80" id="radio80~2" value="2" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span><span class="" style=""><input type="radio"  name="80" id="radio80~3" value="3" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span><span class="" style=""><input type="radio"  name="80" id="radio80~4" value="4" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span></span><span class="" style=""><input type="radio"  name="80"id="radio80~5" value="5" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span></span><span class="" style=""><input type="radio"  name="80"id="radio80~6" value="6" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span></span><span class="" style=""><input type="radio"  name="80" id="radio80~7" value="7" onchange=""><label class="inline" for="80">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label></span></span>

我怎样才能使它成为一种尺寸而不依赖于网络尺寸？

【问题讨论】：

标签： html forms firefox radio-button

【解决方案1】：

说实话，您的 HTML 看起来有点乱。我试图让它更好地阅读，请参阅：

  <div class="input-value">
    <span>
      <input type="radio" name="80" id="radio80~1" value="1">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~2" value="2">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~3" value="3">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~4" value="4">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~5" value="5">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~6" value="6">
      <label class="inline" for="80">&bnsp;</label>
    </span>
    <span>
      <input type="radio" name="80" id="radio80~7" value="7">
      <label class="inline" for="80">&bnsp;</label>
    </span>
  </div>

缩放问题可能是输入应用了自定义 CSS？如果是这样，你能提供这个吗？我认为这与以像素为单位设置的高度和宽度有关，并且在放大和缩小时无法正确计算。您可以尝试在 REM 值中设置宽度和高度，如下所示：

  .input-value input {
    width: 1rem;
    height: 1rem;
  }

另请参阅：https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

【讨论】：