jquery - 使用 CSS 和 JQuery 在 Google Chrome 中损坏的字体样式

Question

我的客户今天通知我一个奇怪的问题，该问题仅影响 Google Chrome 中的网站。供引用的网站是 www.circom.co.uk。该问题与页面顶部动画图像横幅中显示的文本有关。

当使用 Chrome 以外的浏览器查看网站时，网站显示完美。以下是使用 Internet Explorer 11 截取的网站截图:

但是，我已经在 Windows 8.1 上的 Google Chrome 上尝试过该网站，它是这样显示该网站的:

我一直想在我的 Debian 7 安装上更新谷歌浏览器，但我没有时间去做。然而，Debian 上的 Chrome 版本完美地显示了页面，非常像 IE11 图像。 Debian 上的 Chrome 版本是 36.0.1985.125，站点被破坏的 Chrome 版本是 37.0.2062.120 m 版本。

我认为这是 Chrome 的一个错误，我已经报告了。但是，如果 Google 认为这是一项功能，我该怎么做才能修复 Chrome 中的文本？

编辑:
这是执行动画的 JavaScript:

    <script>
        $(document).ready(function(){
            $('#home_banners').each(function() {
            $(this).cycle({
                fx:     'fade',
                speed:  700,
                timeout: 6000,
                after: onAfter,
                before: onBefore
              });
            });

            function onAfter(curr, next, opts, fwd) {
            $('.green-box').delay(300).animate({ left: 0 }, { duration: 300});
            $('.caption').delay(300).animate({ right: 0 }, { duration: 300});
            $('.caption h2').delay(500).animate({ right: '80px' }, { duration: 300});
            }

            function onBefore(curr, next, opts, fwd) {                  
            $('.green-box').animate({ left: '-873px'}, { duration: 500});
            $('.caption').animate({ right: '873px'}, { duration: 500});        
            $('.caption h2').animate({ right: '875px'}, { duration: 500});
            }
                  });
</script>

图书馆可以在这里找到:enter link description here

Answer 1

忍不住注意到屏幕截图中的网站 URL。

这行 CSS 应用到 slider 元素上的标签时似乎会发生:

.green-box .caption-wrapper .caption h2 {
position: absolute;
}

删除它会解决问题，但随后您需要重新评估如何定位该文本。