line-height使文本居中的3像素bug问题

(编辑:jimmy 日期: 2024/11/2 浏览:2)


虽然题目这么写,可是这真是bug吗?我觉得不算。
line-height使文本居中的3像素bug,先查下这3px的底细,怎么查?观察 FW
先写个height、line-height都为30px,背景为红色的元素,设置文字为12px。然后量下,果然有3px的bug。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px(加下减上);为偶数时刚好相反:加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变,这能说明什么呢?还不太肯定,继续同时减小heighe、line-height直到一个合适的值:14px,这时候我们可以看到文字和下划线都是完整的,继续减小1px。这时IE已经不按我们刚才发现的规矩办事了,文字上面被截去1px,这样看来14px应该是IE认为的一个临界点,此时整体高低减去文字高度刚好为3px。会不会?。。。因为这时文字是顶这上边界的,我们把文字增加到2行,发现了吧,第二行的文字不是顶这第一行的下划线的,而是有1px的距离。3px果然是下划线的高度。
其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为31px那这时3px会变为2px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释:heighe、line-height同为30px的时候上下空白区域高度差是3px,然后height、line-height同时加1px,这1px应该是加到上部空间里,所以3pxbug会变成2pxbug。
line-height使文本居中的3像素bug问题
运行代码框

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。