Fatal编程技术网
  • javascript/
  • Javascript WebKit是否存在剪辑错误？

Javascript WebKit是否存在剪辑错误？

javascript html css

Javascript WebKit是否存在剪辑错误？,javascript,html,css,webkit,scrolltop,Javascript,Html,Css,Webkit,Scrolltop,注：我在2021年整理了这个问题，以删除一个死链接，并使代码成为一个实时演示。粗略检查一下，这个问题在当前版本的Chrome中似乎不再存在 给定一个区域，该区域的行高和任何边距都是n，该区域的高度是n的倍数，并且滚动顶部是n的倍数，我发现我在Firefox、Opera和NetFront中得到了预期的结果，但在Chrome（Windows）、Safari（Mac）和最新的WebKit nightly（Mac）中却得到了预期的结果有一些泄漏，我看到部分线路 在我的实际项目（我不能分享）中，效果非常

注：我在2021年整理了这个问题，以删除一个死链接，并使代码成为一个实时演示。粗略检查一下，这个问题在当前版本的Chrome中似乎不再存在

给定一个区域，该区域的行高和任何边距都是
n
，该区域的高度是
n
的倍数，并且滚动顶部是
n
的倍数，我发现我在Firefox、Opera和NetFront中得到了预期的结果，但在Chrome（Windows）、Safari（Mac）和最新的WebKit nightly（Mac）中却得到了预期的结果有一些泄漏，我看到部分线路

在我的实际项目（我不能分享）中，效果非常明显，但即使在简化的测试用例中，也可以看到前一行的底部从框的顶部向外窥视

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

下面可以看到简化的测试用例。单击文档几次以滚动文档，而不是框顶部的点（上一行字母的底部）


头版
身体{
背景色：白色；
颜色：黑色；
}
#包装纸{
宽度：300px；
字号：19px；
字体系列：无衬线；
线高：21px；
高度：210px；/*线高度的倍数*/
溢出：隐藏；
}
#包装纸*{
保证金：0；
填充：0；
}
#包装纸{
页边距底部：21px；/*与行高相同*/
}
window.addEventListener（'click'，函数（）{
document.getElementById（'wrapper'）。scrollTop+=210；
});
头版
对福尔摩斯来说，她永远是女人。我很少听说
他以任何其他名义提到她。在他眼里，她黯然失色
在她的整个性别中占主导地位。他并不是这么想的
任何类似于爱艾琳·阿德勒的情感。所有的情绪，还有
特别是其中一位，他对自己的冷漠、精确、但
令人钦佩的平衡头脑。我认为他是最完美的
推理和观察的机器，世界已经看到，但作为一个
他会把自己置于一个错误的位置。他从来没有
除了嘲讽和冷笑，他谈到了更温柔的激情。他们
对观察家来说是令人钦佩的事情—；非常适合绘制
男人的面纱&8217；他的动机和行动。但对于训练有素的推理者来说
承认这种对他自己的微妙和微妙的
调整气质是为了引入一个分散注意力的因素
可能会对他所有的心理结果产生怀疑。沙砾
灵敏的仪器，还是自己的一个大功率裂缝
镜头，将不会比在一个强烈的情感更令人不安
像他那样的天性。然而他只有一个女人，而且
那个女人就是已故的艾琳·阿德勒，身份可疑
记忆。

我最近很少见到福尔摩斯。我的婚姻使我们陷入困境
彼此远离。我自己的完全幸福，和
以家庭为中心的兴趣，围绕着首先
发现自己是自己机构的主人，足以
吸引我所有的注意力，而福尔摩斯，他讨厌任何形式的
他的整个放荡不羁的灵魂都留在我们的公寓里
贝克街，埋在他的旧书中，从
在可卡因和野心之间的一周又一周
毒品，和他自己敏锐的天性的猛烈能量。他还是,，
一如既往，深深地被犯罪的研究所吸引，并占据了他的位置
在科学上有着巨大的才能和非凡的观察力
找出那些线索，解开那些
被官方警察视为绝望而抛弃。不时
到目前为止，我听到了一些关于他的行为的模糊描述：关于他的召唤
特波夫谋杀案中的奥德萨，他的清白
关于阿特金森兄弟在亭可马里的独特悲剧，
最后是他完成的使命
为荷兰统治家族精心制作并成功制作。
然而，除了这些他活动的迹象之外，我只是
与《每日新闻》的所有读者分享，我对这一点知之甚少
我以前的朋友和同伴。

一晚—；那是1888年3月20日&8212年；我是
从一次旅行中回到一个病人身边（因为我现在回到了
当我穿过贝克街的时候。正如我
经过那扇被人们铭记的门，那扇门必须永远联系在一起
在我的脑海里，随着我的求爱，随着黑暗事件的发生
在《猩红》的学习中，我怀着一种渴望去见福尔摩斯
再一次，我想知道他是如何运用他非凡的力量的。
他的房间里灯火通明，我抬头一看，就发现
他瘦高的身躯在黑暗的人影映衬下两次掠过
盲人。他用头在房间里快速地、急切地踱步
躺在胸前，双手紧握在身后。对我来说，谁
他知道自己的每一种情绪和习惯，他的态度和态度告诉了他们
我自己的故事。他又在工作了。他已经摆脱了困境
毒品制造了梦境，并被一些新的气味灼热
问题我按了门铃，被带到了房间
以前有一部分是我自己的。
这似乎与下降器（qjpg）“突出”线高度框下方有关。Firefox和Safari 
<!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>

line-height: 22px;
height: 220px; /* A multiple of line height */

document.getElementById('wrapper').scrollTop += 220;

/* alternative solution: */
font-size: 18px;