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

Question

我在一个网站上工作并使用媒体查询，以使网站响应。

但是我在Chrome中遇到了非常奇怪的错误，它在错误的位置渲染元素（看起来它正在将页面中的多个元素对齐到右边。

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

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

有没有人知道为什么Chrome会遇到这个问题以及我的CSS会导致什么？

我尝试了什么：

• 在Chrome开发人员工具中检查审核
• 在检查器中修改样式变量
• 禁用缓存
• 禁用javascript

更新

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

更新2 要关闭javascript清楚问题仍然存在。我试图为这个问题做一个简单的测试用例，但由于问题是如此不一致，我无法将其归结为一个简单的css块。

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

更新3 我有一个现场视频，可以显示问题的怪异。你可以看到我第一次打开它是正确的，而不是我关闭并再次打开它，一切都没有对齐。当我检查元素时，一切都跳到正确的位置（它不会始终youtube link

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

Answer 1

似乎svg字体在chrome中存在问题。正如评论者@Wesabi in this google group所指出的那样。我测试了你的链接，并将字体改为非svg字体，看起来很有效。

导致会话内部不一致的原因是，有时在计算元素之前加载字体，有时在依赖于请求补充@ te的顺序之后加载字体。

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

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

Original svg problem with select boxes

Google bug report

Answer 2

你可以尝试使用Eric Meyer的CSS Reset，这将消除不同浏览器渲染之间的所有不一致。这是下面的代码：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}