小林小记-logo 2017年11月4日

复选框和单选框与文字对齐的问题

单选框 多选框

浏览器默认字体大小,显示效果(ie8、ie11、safrai、chrome、edge默认字体大小为16px,firefox默认字体大小为15px)

单选框 多选框

字体大小为12px时

单选框 多选框

字体大小小于16px时,设置checkbox/radio的属性:vertical-aligin:middle;margin-top:-3px;margin-bottom:0;

单选框 多选框

字体大小小于16px时,设置checkbox/radio的属性:height:13px;vertical-align:text-top;margin-top: 2px;padding-top: 0;

单选框 多选框

字体大小小于16px时,为文本新增一个包裹元素,设置其line-height为1.5