Chrome不一致具有偏移的渲染元素

Question

我在一个网站上工作并使用天堂的媒体查询来使网站响应.

但是我在Chrome中遇到了非常奇怪的错误,它将元素呈现在错误的位置(看起来它正在将页面中的多个元素对齐到右边.

我将附上错误对齐的屏幕截图.正如您所看到的,顶栏中的文字超出了界限.在中间,通常居中的每个元素都向右偏移.同样在底栏中,它会抛出通常在彼此顶部彼此相邻的文本元素.

要在线查看网站https://tunepitch.com/.奇怪的是,铬有时会让它错误,但很多时候它显示正确.它可以通过拖动窗口消失,但更有效的方法是杀死浏览器并重新启动它.

有谁知道为什么chrome有这个问题以及在我的CSS中导致它的原因是什么？

我尝试了什么:

UPDATE

我花了一些时间调试css.逐行添加css仍然无法找到根问题.我注意到所有未对齐的元素都是webkit浏览器无法正确计算宽度.我希望额外的图像可以指出它.(尤其是当你悬停文字时,悬停时应该变成紫色.正如你所看到的那样,只有紫色到一定的宽度.

更新2 要清除javascript关闭问题仍然会发生.我试图为这个问题做一个简单的测试用例,但由于问题是如此不一致,我无法将其归结为简单的css块.

我在Windows 8.1上使用chrome 31.0.1650.57.我的一个客户也将Windows 7与31.0.1650.57结合使用.

更新3 我有一个现场视频,可以显示问题的怪异.你可以看到我第一次打开它是正确的,而不是我关闭并再次打开它,一切都没有对齐.然后,当我检查元素时,一切都跳到正确的位置(它总是不会这样做到youtube链接

更新4 @SetSailMedia是对的是在Chrome中使用svg字体.奇怪的是,我在其他一些网站上使用过这种字体,从未见过这个问题.我改回来从google的webfonts加载字体而不是我自己的托管字体.这导致字体再次变得难看,但它比元素的错位更好.

错误计算webkit

错误的对齐

Answer 1

svg 字体在 chrome 中似乎有问题。正如该谷歌群组中的评论者@Wesabi 所指出的。我测试了你的链接并将字体更改为非 svg 字体，它似乎有效。

导致会话中不一致的原因是有时在计算元素之前加载字体，有时在计算元素之后加载字体，具体取决于请求完成的顺序。

最好的解决方案是使用 Google Webfonts，即使它使字体在 Chrome 中看起来抗锯齿，它也会默认为另一种字体类型。

例如，Chrome 在选择框中渲染 SVG 字体时也存在问题。查看原始问题和错误报告。