个人中心
gpt4 book ai didi

javascript - WebKit 有裁剪错误吗？

转载 作者：技术小花猫 更新时间：2023-10-29 12:07:18 28 4
gpt4 key购买 nike

注意:我在 2021 年整理了这个问题，删除了死链接并将代码制作为现场演示。粗略检查一下，该问题似乎在当前版本的 Chrome 中已不存在。

给定一个区域，其中行高和任何边距都是 n，并且该区域的高度是 n 的倍数，并且 scrollTop 增加了n 的倍数 我发现我在 Firefox、Opera 和 NetFront 中得到了预期的结果，但在 Chrome (Windows)、Safari (Mac) 和最新的 WebKit nightly (Mac) 中有一些泄漏，我查看部分行。

在我的实际元素中(我无法分享)效果非常明显，但即使在简化的测试用例中，也可以看到上一行的底部从框的顶部窥视。

是否有可能避免这种影响？这是应该报告的 WebKit 呈现引擎中的错误吗？

缩减的测试用例如下所示。单击文档几次以滚动它，而不是框顶部的点(它们是上一行字母的底部)。

    <!DOCTYPE HTML> 
    <html lang="en"> 
        <head> 
            <meta charset="utf-8"/> 
            <title>scrollTop issue</title> 
            <style> 
            body {
                background-color: white;
                color: black;
            }
            #wrapper {
                width: 300px;
                font-size: 19px;
                font-family: sans-serif;
                line-height: 21px;
                height: 210px; /* A multiple of line height */
                overflow: hidden;
            }
            
            #wrapper * {
                margin: 0;
                padding: 0;
            }
            
            #wrapper p {
                margin-bottom: 21px; /* Same as line height */
            }
            </style> 
            <script> 
                window.addEventListener('click', function () {
                    document.getElementById('wrapper').scrollTop += 210;    
                });
            </script> 
        </head> 
        <body> 
            <h1>scrollTop issue</h1> 
            <div id="wrapper"> 
                <div id="content"> 
                    <p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
    him mention her under any other name. In his eyes she eclipses
    and predominates the whole of her sex. It was not that he felt
    any emotion akin to love for Irene Adler. All emotions, and that
    one particularly, were abhorrent to his cold, precise but
    admirably balanced mind. He was, I take it, the most perfect
    reasoning and observing machine that the world has seen, but as a
    lover he would have placed himself in a false position. He never
    spoke of the softer passions, save with a gibe and a sneer. They
    were admirable things for the observer&#8212;excellent for drawing the
    veil from men&#8217;s motives and actions. But for the trained reasoner
    to admit such intrusions into his own delicate and finely
    adjusted temperament was to introduce a distracting factor which
    might throw a doubt upon all his mental results. Grit in a
    sensitive instrument, or a crack in one of his own high-power
    lenses, would not be more disturbing than a strong emotion in a
    nature such as his. And yet there was but one woman to him, and
    that woman was the late Irene Adler, of dubious and questionable
    memory.
    <p> 
    I had seen little of Holmes lately. My marriage had drifted us
    away from each other. My own complete happiness, and the
    home-centred interests which rise up around the man who first
    finds himself master of his own establishment, were sufficient to
    absorb all my attention, while Holmes, who loathed every form of
    society with his whole Bohemian soul, remained in our lodgings in
    Baker Street, buried among his old books, and alternating from
    week to week between cocaine and ambition, the drowsiness of the
    drug, and the fierce energy of his own keen nature. He was still,
    as ever, deeply attracted by the study of crime, and occupied his
    immense faculties and extraordinary powers of observation in
    following out those clues, and clearing up those mysteries which
    had been abandoned as hopeless by the official police. From time
    to time I heard some vague account of his doings: of his summons
    to Odessa in the case of the Trepoff murder, of his clearing up
    of the singular tragedy of the Atkinson brothers at Trincomalee,
    and finally of the mission which he had accomplished so
    delicately and successfully for the reigning family of Holland.
    Beyond these signs of his activity, however, which I merely
    shared with all the readers of the daily press, I knew little of
    my former friend and companion.
    <p> 
    One night&#8212;it was on the twentieth of March, 1888&#8212;I was
    returning from a journey to a patient (for I had now returned to
    civil practice), when my way led me through Baker Street. As I
    passed the well-remembered door, which must always be associated
    in my mind with my wooing, and with the dark incidents of the
    Study in Scarlet, I was seized with a keen desire to see Holmes
    again, and to know how he was employing his extraordinary powers.
    His rooms were brilliantly lit, and, even as I looked up, I saw
    his tall, spare figure pass twice in a dark silhouette against
    the blind. He was pacing the room swiftly, eagerly, with his head
    sunk upon his chest and his hands clasped behind him. To me, who
    knew his every mood and habit, his attitude and manner told their
    own story. He was at work again. He had risen out of his
    drug-created dreams and was hot upon the scent of some new
    problem. I rang the bell and was shown up to the chamber which
    had formerly been in part my own.
                </div> 
            </div> 
        </body> 
    </html>

最佳答案

这似乎与行高框下方“突出”的下降部分 (qjpg) 有关。 Firefox 和 Safari 似乎就如何做到这一点达成一致——字符可以突出显示。然而，通过将尺寸扩大 x 10，我们注意到 sans-serif 有一些有趣的东西。

在 Mac OS X 中，Safari 和 Firefox 都选择了 helvetica 作为 sans-serif 的字体。但是 Firefox 将行高框中的特定字体向上移动，因此底部不会“突出”。与 arial 比较 - 微软对 helvetica 的 SCSS ，两种浏览器都让它突出显示。

Safari vs Firefox descender sans-serif/arial

我认为解决你的问题的方法是找到一个“合理的”负边距来向上抵消内容。似乎 helvetica 和 arial 在框的顶部都有一些“回旋余地”。我会使用 #wrapper #content { margin-top: -1px; } (选择器非常强大，可以克服 #wrapper *)，适用于您示例中的特定 font-size/line-height。

这是我的测试代码。它表明 geneva 和 verdana 的“突出”可能更糟。

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"/> 
        <title>descender issue</title> 
        <style> 

          * {
            margin: 0;
            padding: 0;
          }

          .content {
            margin-bottom: 30px;
            background: #ffdd88;
            font-size: 190px;
            line-height: 210px;
          }

          #content1 {
            font-family: sans-serif;
          }

          #content2 {
            font-family: arial;
          }

          #content3 {
            font-family: geneva;
          }


          #content4 {
            font-family: helvetica;
          }

          #content5 {
            font-family: 'trebuchet ms';
          }

          #content6 {
            font-family: verdana;
          }

          #content7 {
            font-family: serif;
          }

          #content8 {
            font-family: times;
          }

        </style> 
    </head> 
    <body> 
      <h1>descender issue</h1> 
      sans-serif
        <div class="content" id="content1"> 
          lfgjpq
        </div> 
      arial
        <div class="content" id="content2"> 
          lfgjpq
        </div> 
      geneva
        <div class="content" id="content3"> 
          lfgjpq
        </div> 
      helvetica
        <div class="content" id="content4"> 
          lfgjpq
        </div> 
      trebuchet ms
        <div class="content" id="content5"> 
          lfgjpq
        </div> 
      verdana
        <div class="content" id="content6"> 
          lfgjpq
        </div> 
      serif
        <div class="content" id="content7"> 
          lfgjpq
        </div> 
      times
        <div class="content" id="content8"> 
          lfgjpq
        </div> 
    </body> 
</html>

关于javascript - WebKit 有裁剪错误吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4325440/

28 4 0
文章推荐： linux - lsof 不为内置读取的 bash 提供 o/p
文章推荐： Java，从 Java 代码中控制 Linux 服务器的正确方法？
文章推荐： c++ - 无法为我的 LruCache 类定义模板化类型
文章推荐： firefox - 视频文件 .ogv 在 Firefox 本地播放，而不是从服务器播放
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com