单选按钮在 chrome 和 IE 中显得很小，但在 Firefox 中显得大小合适

Question

这是我的 jsbin 代码片段的 link： https://jsbin.com/bozovificu/edit?html

你会发现即使在这里单选按钮的大小也是正常的。

但在我的 chrome 和 IE 中它们非常小，您在 jsbin 控制台中看到的大小与 firefox 的大小相同（这是我所期望的）。任何人都可以帮助我哪里出错了吗？

Answer 1

添加一些css，你有none

#input-group {
  height: 60px;
}
input {
  height: 20px!important;
  vertical-align: middle;
}
label {
  height: 57px!important;
  vertical-align: middle;
}
input,
label {
  display: inline;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <p>Network Port Configuration</p>
  <div id="input-group">
    <label for="cm">Connection Mode</label>
    <input type="radio" name="cm" id="static" value="static">
    <label for="static">Static</label>
    <input type="radio" name="cm" id="dhcp" value="dhcp">
    <label for="dhcp">DHCP</label>
  </div>
</body>

</html>

单选按钮在 chrome 和 IE 中显得很小，但在 Firefox 中显得大小合适

Radio buttons appearing tiny in chrome and IE but appearing decent size in firefox

html

radio-button