相关疑难解决方法(0)

我在我的网站上嵌入了一些自定义的webfonts,我使用的东西就像

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

设置渲染输出的样式.这在Safari和Chrome中运行良好.我得到更清晰的边缘和更细的线条.

在Firefox中有没有办法做这样的事情？还是歌剧？

我的页面似乎存在问题:http: //www.lonewulf.eu

将鼠标悬停在缩略图上时,图像会在右侧稍微移动,而只会在Chrome上进行.

我的css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

这是一个时髦的.我确定它与webkit相关,因为它似乎只是Chrome版本20.0.1132.57和Safari 5.1.7中的一个问题.我上传了一个简短的视频来解释这个问题,因为几乎不可能通过文字来解释.

视频:http: //youtu.be/0XttO-Diz2g

简短版本: 在CSS3动画期间,定位元素(绝对或相对)内的文本似乎改变了它的抗锯齿.动画正在运行时变得更大胆.

注意: 这与缩放元素变得模糊不适的动画不同.(这个问题)

任何想法,解决方法等？

情况:

查看jsFiddle

在div我的内部有一个图像,后跟文本,其上有font-weight900.在我的本地托管环境中,我使用的是自定义字体,但对于上面的小提琴,我选择了"永远如此时尚"的Comic Sans来说明我的观点.在发生任何事情之前,我将整个div的不透明度设置为0.7.但是,在盘旋过程中div,我希望一切的不透明度达到完全不透明度.

问题:

我注意到仅在Webkit浏览器中(在Chrome上比在Safari上更明显),在悬停在div标签上时,文本的重量似乎会发生变化.实际上,文本的权重当然没有任何变化.但是,仔细阅读后,您会看到文本仅在悬停时显示为所需的重量,但不会处于非悬停状态.

我做的事情:

• 我已在所有最新版本的Chrome,Firefox和Safari中对此进行了测试.
• 我正在测试这款新MacBook Pro,在我的例子中,它是一个视网膜屏幕.然而,我旁边的同事测试了她的iMac(非视网膜显示器)上的小提琴只是为了发现这个问题仍然很明显.
• 也许我只是疯了,但我觉得这实际上可能是webkit浏览器选择渲染具有不同不透明度的元素.然后,这可能只是我试图避免承认我做错了什么.

当然我觉得我可以用Comic Sans来减轻情绪.这是一个屏幕截图,以帮助解释问题: