转载

【BUG】宽高1.14em并不一定相等哦(^。^)

前传

我们想要自定义 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 单位的包含小数的宽高仍然是有问题的。

原文 http://f2e.souche.com/blog/bug-zhi-ding-zi-ti-xia-inline-blockyuan-su-kuan-gao-1-14embing-bu-xiang-deng/

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。