问题描述

在safari浏览器下的选择框在点击时会跳动。

问题代码

<input type="checkbox" id="checkAll"/>
<label for="checkAll">全选</label>

问题分析

查看样式后发现在checkbox的某个样式类中被设置了height值，而在safari浏览器下，如果checkbox设置了height后就会发生跳动现象。

进一步分析

针对这个问题，可能搜索一下，去掉checkbox的height就好了。但是继续问一下为什么

• 为什么要给input[type=checkbox]设置height，这种方法有无必要呢？ 不设置会有什么问题？
• 为什么safari会跳动，是浏览器bug吗？
• 如何实现checkbox和label的对齐，如何自定义checkbox背景？

一些思考