Question

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

在slideToggle动画期间，div.ccn中每行的第一个字符在左侧移动几个像素。它似乎与Firefox字体渲染和浏览器垂直滚动条有关。在slideToggle动画期间滚动条必须出现或消失时可能会发生错误。但它也可以在其他情况下复制。

找到一些解决方法：

将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>

CSS来源：

p {
    margin: 0;
    padding: 0 0 .5em 0;
}

div.ct {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
}

JSFiddle： http://jsfiddle.net/f1wjrLfn/ 在JSFiddle上，结果不一样：在slideToggle中，白色悬停部分隐藏了j字的justo字。

有人知道Linux Firefox上的这个字体问题吗？

Answer 1

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

html {
    overflow-y: scroll;
}

Linux Firefox上的Jquery slideToggle字体问题

1 个答案: