我在一个网站上工作，并巧妙地使用了媒体查询来使网站响应迅速。
但我在 Chrome 中遇到了非常奇怪的错误，它在错误的位置呈现元素(看起来它正在将页面上的多个元素右对齐。
我将附上错误对齐的屏幕截图。如您所见，顶部栏中的文本超出了线条。在中间，通常居中的每个元素都向右偏移。同样在底部栏中，它会抛出通常彼此相邻的文本元素。
在线查看网站https://tunepitch.com/ .奇怪的是，chrome 有时会显示错误，但很多时候它显示正确。它可以通过拖动窗口消失，但更有效的方法是终止浏览器并重新启动它。
有谁知道为什么 chrome 会出现这个问题以及是什么导致了我的 css？
我试过的:
- 在 chrome 开发者工具中检查审核
- 在检查器中修改样式变量
- 禁用缓存
- 禁用javascript
更新
我花了一些时间调试 CSS。逐行添加css，仍然找不到根本问题。我注意到所有未对齐的元素是 webkit 浏览器无法正确计算宽度。我希望额外的图像可以指出这一点。 (尤其是当您将鼠标悬停时，文本应该在悬停时变为紫色。如您所见，它仅在一定宽度范围内为紫色。
更新 2 要清楚关闭javascript，问题仍然存在。我试图为这个问题制作一个简单的测试用例，但因为这个问题太不一致了，我无法将它确定为一个简单的 css block 。
我在 Windows 8.1 上使用 chrome 31.0.1650.57。我的一位客户也将 Windows 7 与 31.0.1650.57 结合使用。
更新 3 我有一个直播视频可以显示问题的奇怪之处。你可以看到我第一次打开 chrome 时它是正确的，然后我关闭并再次打开它并且一切都错位了。当我然后检查元素时，所有内容都会跳到正确的位置(它并不总是这样做 youtube link
更新 4 @SetSailMedia 是正确的，是在 Chrome 中使用了 svg 字体。奇怪的是，我在其他一些网站上使用了这个字体，却从未见过这个问题。我改回从 google 的 webfonts 加载字体而不是我自己的托管字体。这会导致字体再次变得难看，但这是比元素未对齐更好的解决方案。
最佳答案
看来svg字体在chrome中有问题。正如评论者@Wesabi 所指出的那样 in this google group .我测试了您的链接并将字体更改为非 svg 字体，它似乎可以正常工作。
导致您在 session 中出现不一致的原因是有时字体在计算元素之前加载，有时在计算元素之后加载，具体取决于请求完成的顺序@te。
最好的解决方案是使用 Google Webfonts，即使它使字体在 chrome 中看起来消除锯齿，它也会默认为另一种字体类型。
例如，Chrome 在选择框中呈现 SVG 字体时也存在问题。查看原始问题和错误报告。
关于html - Chrome 不一致渲染元素有偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20230928/