前传
我们想要自定义 input[type=”radio”]的样式来符合我们产品的设计稿。
-webkit-appearance是用来改变按钮和其他控件的外观的一个 css 属性，它没有出现在 css 规范草案中。
我们通过 -webkit-appearance: none进行样式自定义之后，发现 chrome 下单选框有点扁，一度认为是浏览器版本 BUG，就先忽略了。
前几天，同事发现禁用我们设置的 font-family之后，能够恢复正常。
正文
input在设置 -webkit-appearance: none后，并不是一个普通的 div，而应该是 display: inline-block的 div，因为它可以和文字在同一段落而不自动换行。
立即学习“前端免费学习笔记（深入）”；
我创建一个 display: inline-block的 div，并设置 border和宽高，来重现 input[type=”radio”]变扁的样式。
在 chrome（我的版本是 49.0.2623.112 (64-bit) MAC，但应该能在大部分版本重现） 下：设置特定字体后， inline-block的 div宽高单位使用 em时，可能会出现宽高不等的问题。
（以下测试基于我们的页面 font-size: 12px）
宽 1.11em – 1.14em 约等于 1.1 em，1.15em – 1.19em 约等于 1.2em，符合四舍五入。
高 1.11em – 1.13em 约等于 1.1 em，1.14em – 1.19em 约等于 1.2em，导致我们宽高设置 1.14em 造成了 input[type=”radio”]变扁。
更糟糕的是：宽高同为 1.1em 也不完全相等，而 1.2 em 是正常的。
通过计算，1.14em 约等于 13.68px，使用 px 单位的包含小数的宽高仍然是有问题的。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3117881.html
