html - 诊断 div 错位

Question

服务器端开发，涉足html/css设计。

我有三个单选按钮，我将其样式设置为“可点击”框。这就是我的意思:

以上是选项在我笔记本电脑的 Firefox (Ubuntu OS) 上的样子。

问题是，在移动 chrome/safari/opera 等设备上查看时，相同的最终结果看起来明显错位。您自己看看:

我盯着代码看了半天也没能找到bug。专家可以帮我解决这个问题吗？

---

这是我的代码:

/* Hide the browser's default checkbox */

.checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.label {
  background: white;
  padding: 7px 10px;
  height: 46px;
  width: 260px;
  border: 1px solid #3cb7dd;
  margin-bottom: -1px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.fxjscn {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.fxaicn {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mbl {
  margin-bottom: 1em;
}

.mts {
  margin-top: 0.5em;
}

.lsp {
  line-height: 1.55;
}

.clb {
  color: #404040;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

<div class="clb mbl mts" style="border:3px solid #ececec;border-radius:12px;overflow:hidden;background:snow;max-width:500px;margin-left:auto;margin-right:auto;width:97%">

  <div style="margin: 0 auto;text-align: center;">

    <input type="radio" name="aud" class="checkbox" id="aud-first" value="1">
    <label class="label" for="aud-first" style="border-top-left-radius:8px;border-top-right-radius:8px;display: inline-flex;align-items: center;">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

    <input type="radio" name="aud" class="checkbox" id="aud-second" value="2">
    <label class="label" for="aud-second" style="display: inline-flex;align-items: center;">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

    <input type="radio" name="aud" class="checkbox" id="aud-third" value="3">
    <label class="label" for="aud-third" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px;display: inline-flex;align-items: center">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

  </div>

</div>

请原谅我在代码中添加了一些额外的花哨装饰。它们已包含在内，以防它们是造成上述错位的罪魁祸首(它们是原始代码的一部分)。

注意:通过此链接直接在移动浏览器中检查错位:https://codepen.io/mhb11/pen/BaBpxrr它完全与我在问题中包含的代码相同。

Answer 1

不确定为什么，但它与 inline-flex 和与内联元素相关的空格有关(或者可能是一个简单的错误)。请改用 flex，您将不会遇到此问题。您将获得相同的输出，因为您正在固定元素的宽度:

/* Hide the browser's default checkbox */

.checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.label {
  background: white;
  padding: 7px 10px;
  height: 46px;
  width: 260px;
  border: 1px solid #3cb7dd;
  margin:0 auto -1px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.fxjscn {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.fxaicn {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mbl {
  margin-bottom: 1em;
}

.mts {
  margin-top: 0.5em;
}

.lsp {
  line-height: 1.55;
}

.clb {
  color: #404040;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

<div class="clb mbl mts" style="border:3px solid #ececec;border-radius:12px;overflow:hidden;background:snow;max-width:500px;margin-left:auto;margin-right:auto;width:97%">

  <div style="margin: 0 auto;">

    <input type="radio" name="aud" class="checkbox" id="aud-first" value="1">
    <label class="label" for="aud-first" style="border-top-left-radius:8px;border-top-right-radius:8px;display: flex;align-items: center;">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

    <input type="radio" name="aud" class="checkbox" id="aud-second" value="2">
    <label class="label" for="aud-second" style="display: flex;align-items: center;">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

    <input type="radio" name="aud" class="checkbox" id="aud-third" value="3">
    <label class="label" for="aud-third" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px;display: flex;align-items: center">
    <div class="fx fxjscn fxaicn">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
        <div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
    </div>
    </label>

  </div>

</div>