鍍金池/ 問(wèn)答/HTML5  HTML/ css使用tranform：translateY-50%屬性進(jìn)行垂直居中調(diào)整的時(shí)

css使用tranform：translateY-50%屬性進(jìn)行垂直居中調(diào)整的時(shí)候會(huì)導(dǎo)致被居中元素的邊框渲染異常？

使用tranform：translateY(-50%)屬性進(jìn)行垂直居中調(diào)整的時(shí)候會(huì)導(dǎo)致被居中元素的邊框渲染異常。

clipboard.png

1.改為marin-top調(diào)整就是正常的。

clipboard.png

2.改成tranform：translate3d的方式，開啟硬件加速也可以正常渲染。

clipboard.png

3.把同級(jí)元素去除，使用translateY(-50%)也可以正常渲染。

clipboard.png

請(qǐng)問(wèn)是什么原因？

回答
編輯回答
心沉

只要元素是單數(shù)的 比如21高度 用transform居中有時(shí)就會(huì)造成這樣的模糊 你把按鈕lineheight跟height設(shè)置成雙數(shù) 應(yīng)該就好了

2018年2月1日 02:00
編輯回答
陌南塵

解決辦法就是放棄css3使用js動(dòng)態(tài)計(jì)算。
因?yàn)?code>translate視覺上允許0.5px的存在，而本身矩陣式不支持小數(shù)像素的。說(shuō)法不太準(zhǔn)確，意思是這么個(gè)意思

2018年7月7日 02:34