【BUG】宽高1.14em并不一定相等哦(^。^)_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:50:37
Original
1176 people have browsed it

前传

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template