Question

我在标签内有复选框（这样用户可以点击checbox或标签）。问题出在Chrome中，复选框和标签之间的空间很小，未检测到点击。我添加了黄色背景颜色，以查看标签结束的位置，突然它起作用。有谁知道为什么？现在我只是在工作代码中添加了白色背景颜色，但我真的很好奇。

<body>
  Between CheckBox1 and it's label is small unclickable space in chrome. In CheckBox2 there is not. The only difference is that label of CheckBox2 has set yellow background color. WTF?
  <div>
    <label><input type="checkbox" />CheckBox1</label>
  </div>
  <div>
    <label style="background-color: yellow;"><input type="checkbox" />CheckBox2</label>
  </div>
</body>

Answer 1

如果我理解正确，您应该使用标签的for属性：

＆＃13;

<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">To check!</label>

＆＃13;

Answer 2

Chrome以不同方式呈现复选框，这可能就是原因。不是传统的正确解决方案，但您可以设置background:transparent来解决问题。当然，你也可以通过调整paddings, width等来解决这个问题。

＆＃13;

<body>
  Between CheckBox1 and it's label is small unclickable space in chrome. In CheckBox2 there is not. The only difference is that label of CheckBox2 has set yellow background color. WTF?
  <div>
    <label><input type="checkbox" />CheckBox1</label>
  </div>
  <div>
    <label style="background-color: transparent;"><input type="checkbox" />CheckBox2</label>
  </div>
</body>

＆＃13;

如果标签没有背景颜色，则标签和复选框之间会出现不可忽略的空格

2 个答案: