CSS变换会在Firefox 41.0.1上模糊复选框。

Question

3

当我在复选框上使用transform时，复选框会变得模糊。

没有使用css transform

.box {
  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="box">
  <label>
    <input type="checkbox" name="check"><span> Check me</span>
  </label>
</div>

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box">
  <label>
    <input type="checkbox" name="check"><span> Check me</span>
  </label>
</div>

什么是问题的原因，如何解决？

- Muhammet

2

这是由于亚像素渲染所致。使用 transform: translate3d(-53%, -53%, 0); 和 top: 53%; left: 53%; 可以使复选框更清晰。 - Abhitalks

1

@Abhitalks 谢谢，现在看起来更清晰了。如果您将其添加为答案，我将接受它。 - Muhammet

请注意，我在 Mac 上测试没有问题。 - Marcos Pérez Gude

@Abhitalks 再次感谢您的解释。 - Muhammet

@MarcosPérezGude 是的，我在使用Windows 8.1。 - Muhammet

显示剩余3条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sharper · Answer 1

我想这是浏览器默认的焦点状态。你可以通过覆盖状态来禁用它。元素:focus{outline:none;}

- Sharper · Answer 2

我认为这是因为它被包含在标签中。如果您不需要可点击的标签，请执行以下操作以避免此问题：

<div class="box">
    <input type="checkbox" name="check" id="check"><label for="check">Check me</label>
</div>

你可以添加一点js代码，使得当标签被点击时选择复选框。我无法通过css解决这个问题。