Question

给定一个区域，其中行高和任何边距为n，并且该区域的高度为n的倍数，并且scrollTop增加{{1}的倍数我发现我得到了我在Firefox，Opera和NetFront中所期望的结果，但在Chrome（Windows），Safari（Mac）和最新的WebKit每晚（Mac）中都有一些泄漏，我看到了部分线条。

在我的实际项目中（我无法分享）效果非常明显，但即使在简化的测试用例中，也可以看到上一行的底部在框的顶部突出显示。

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

简化的测试用例可以在下面看到as a live example on my website。单击文档几次以滚动它而不是框顶部的点（这是前一行字母的底部）。

Answer 1

看起来这与下降线（qjpg）“伸出”线高度框下方有关。 Firefox和Safari似乎同意如何做到这一点 - 允许字符突出。但是，通过夸大x 10的大小，我们注意到sans-serif的一些有趣内容。

在Mac OS X中，Safari和Firefox都选择helvetica作为sans-serif的字体。但Firefox在行高盒中向上移动该特定字体，因此底部不会“伸出”。与arial - 微软对helvetica的混淆进行比较，两个浏览器都将其推出。

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>

Answer 2

您是否尝试过增加1px的线高？我在Chrome中尝试过它并且有效：

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

和

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

或者你可以将字体大小减少1px，这也适用于我：

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

WebKit有剪辑错误吗？

2 个答案: