相关疑难解决方法(0)

我想把我的中心div和我使用这种方法,但它使我的文本div模糊:

<!-- language: lang-css -->

#div {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

有没有办法让我的中心div？

编辑2016-07-04(因为这个问题越来越受欢迎):这是Chrome中的一个错误.开发人员正积极致力于修复.

编辑2017-05-14该错误似乎已修复,修复程序将在Chrome 60中引入

编辑2018-05-04修复已合并,但该错误仍然存​​在.

所以我有这个非常丑陋的窗口,这个窗口以CSS为中心:

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

   transform: translate(-50%, -50%);
}

但是,它在Chrome上看起来像这样(字体看起来很模糊):

但是这样在Firefox上:

当我删除transform规则时,文本看起来又漂亮又松脆,但它不再正确居中.

当我去chrome://flags执行#disable-direct-write它看起来更好,但用户显然不会这样做,它不能解决问题.

如何在让窗口居中的同时让我的字体看起来很漂亮？

我的Chrome版本是 44.0.2403.155

我有一个three.js使用WebGL 的演示,它在背景画布上呈现.当我禁用演示时,问题不再出现.

JSFiddle的背景.

没有背景的JSFiddle.

我的页面上有一个图像,我希望保持比例,但根据屏幕大小调整大小.我希望它能使较小的宽度和高度完全适合元素,并且较大的尺寸会溢出元素.

我找到了

object-fit: cover; 

风格适合我的需要,但很快发现对此的支持非常有限(几乎只有歌剧).还有什么我可以用来实现这个目标吗？

提前谢谢了 :)