Linux Firefox上的Jquery slideToggle字体问题_Jquery_Css_Firefox

Linux Firefox上的Jquery slideToggle字体问题

jquery css firefox

Linux Firefox上的Jquery slideToggle字体问题,jquery,css,firefox,Jquery,Css,Firefox,我在Linux Firefox Lubuntu 14，FF 33上有一个Jquery slideToggle字体问题。我在Chrome或Windows上没有遇到过这个问题在slideToggle动画中，div.ccn中每行的第一个角色在左侧移动几个像素。它似乎与Firefox字体呈现和浏览器垂直滚动条有关。当滚动条在滑动切换动画中出现或消失时，可能会出现错误。但它也可以在其他环境中复制只要找到一些方法来解决它：将p标记填充设置为0 将图片链接替换为文本链接设置位置：相对于div.ccn

我在Linux Firefox Lubuntu 14，FF 33上有一个Jquery slideToggle字体问题。我在Chrome或Windows上没有遇到过这个问题

在slideToggle动画中，div.ccn中每行的第一个角色在左侧移动几个像素。它似乎与Firefox字体呈现和浏览器垂直滚动条有关。当滚动条在滑动切换动画中出现或消失时，可能会出现错误。但它也可以在其他环境中复制

只要找到一些方法来解决它：

将p标记填充设置为0 将图片链接替换为文本链接设置位置：相对于div.ccn 此处是动画过程中的屏幕截图，第一个字母在左侧移动了几个像素，在真实动画中更可见：

动画结束后，单击此处确定：

HTML来源：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="my.css" type="text/css" />
    </head>
    <body>
        <div class="ct">
            <p>
            Nam aliquet ac velit non facilisis. Donec eu eros sit amet tortor tincidunt tincidunt. In at dictum dui. Ut ultricies at nisl ac imperdiet. Ut arcu nibh, aliquam pulvinar pellentesque non, blandit eu justo. Quisque sollicitudin dui a tristique ultricies. Duis at risus dictum, porta mi sed, dictum nisl.
            </p>

            <div class="ccn">
            <p>
            Nam aliquet ac velit non facilisis. Donec eu eros sit amet tortor tincidunt tincidunt. In at dictum dui. Ut ultricies at nisl ac imperdiet. Ut arcu nibh, aliquam pulvinar pellentesque non, blandit eu justo. Quisque sollicitudin dui a tristique ultricies. Duis at risus dictum, porta mi sed, dictum nisl.
            </p>

            <p>
            Nam aliquet ac velit non facilisis. Donec eu eros sit amet tortor tincidunt tincidunt. In at dictum dui. Ut ultricies at nisl ac imperdiet. Ut arcu nibh, aliquam pulvinar pellentesque non, blandit eu justo. Quisque sollicitudin dui a tristique ultricies. Duis at risus dictum, porta mi sed, dictum nisl.
            </p>
            </div>

            <p><a href="javascript:;" class="ccl"><img src="img/com-shw.png" /></a></p>
        </div>

        <script src="jquery-1.11.0.min.js"></script>
        <script type="text/javascript">          
            $(".ccn").hide();
            $(".ccl").click(function () {
                $(".ccn").slideToggle(5000);
            });
        </script>
    </body>
</html>

JSFiddle：在JSFIDLE上，结果不一样：在滑动切换期间，justo单词的j字母部分被白色悬停隐藏

有人注意到Linux Firefox上的字体问题？

如果这是由于出现滚动条并移动了div的内容，那么您所要做的就是修复它：

html {
    overflow-y: scroll;
}

谢谢你的回答。不，内容不会移动，只有ccn div中每行的第一个字符。是的，这是解决此问题的另一种方法。但这并不能解释为什么每行的第一个字符在左边移动了几个像素。在我看来，这与FirefoxforLinux中字体的一些呈现问题有关。因为我在Firefox for Windows上没有遇到这个问题。

html {
    overflow-y: scroll;
}