不同的 Chrome 复选框大小

Question

我想以某种优雅的方式解决仅在 Chrome 中发生的设计问题。 当我用div 包装“输入”类型复选框时，它具有引导类col-…。这个div div 由复选框填充，但在 Chrome 中，复选框也会改变大小（变大） 我找到了一个解决方案，基本上可以解决问题，但并不理想。

 @media (-webkit-min-device-pixel-ratio: 0) {
       [class*="col-"] input[type=checkbox] {
            -webkit-transform: scale(0.5) !important;
        }
    }

JSFiddle example

首先，我只需要为 Chrome 制定此规则，因为根据 MDN 这不是最佳实践。 其次，scale的变化不仅影响checkbox的大小，还影响div内的一切。因此，我失去了该功能，该客户不得完全单击复选框以进行检查。 有没有更好的解决方案？

 

Answer 1

您的问题是，在 JSFiddle 中提供的代码中，您使用的是具有固定高度的 form-control 类。关于 FF 和 Chrome 的行为，似乎只有 Chrome 实际上允许您使用 CSS 设置复选框的尺寸...

我建议您检查 Bootstrap docs 并查看该复选框在 Bootstrap 中是如何实现的。