上网查了一下，好像是说和浏览器渲染有问题，transform里的值不能设置成基数，但我这里摆明就不是奇数： 解决办法 在使用 transform: translate3d(50%, 50%, 0) 时： 如果元素的高度可以固定，那么其值设置为偶数即可 如果元素的高度不可以固定，看看 ...

我在给一个定位元素垂直居中的时候惯性的设置了 设置完成后没有发现问题，后来无论时美工还是测试都反应这个元素字体模糊。 我还是第一次遇见这个问题。后来经过反复排除认定了时 transform 的锅。 经过查资料时应为要移动的元素的高度时奇数的。css 动画在渲染非整数的 px 时就会 ...

最近写项目时也碰到了字体会模糊的情况，先简单描述一下问题 一个宽度固定但是高度auto的弹窗让他在屏幕当中展示（不能使用flex属性）， 用了以上代码让弹窗居中，后来发现有的情况会使文字显示的很模糊，感官很不舒服， 开始发现注释掉全局的padding ：0；能解决这个问题 ...

当元素进入GPU中渲染时，在Chrome35+中的字体为grayscale渲染，IE11和FF30保持sub-pixel渲染不变。若transform值函数(如translate3d(), scale(), rotate()等)中的参数为非整数，会导致字体模糊。 ...

最近给公司网站做一个动画，但是该动画影响了文字的的正常显示。 于是乎，百度+谷歌之后整理如下，以便下次踩到这个坑时可以及时跳出来，毕竟这个需求还是挺常见的 😃 先看看是什么问题： 动画是加在图片上的，但是却影响了其他文字，至于为什么会导致这样的问题，暂时还没有找到答案。 解决办法 ...

项目中遇到的，关于居中弹出层的字体模糊问题。 先来个对比图： 清晰版： 模糊版： 这个是一个不定宽高的弹出框，居中的方式如下代码： .layerdiv { position: fixed; top: 50%; left: 50 ...

今日客户反馈，发现 使用了 translate会导致字体模糊。 为了垂直居中，使用了 transform: translateY(-50%) 和 top:50% ，然后出现了字体模糊的问题。 现解决方法如下： 1、可以不使用 transform: translateY(-50 ...

ul{ width:100px; height:80px; overflow:hidden; list-style:none; } ul li{ float:rig ...