19

注意:私は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>

4

2 に答える 2

28

これは、行の高さのボックスの下に「突き出ている」ディセンダー(qjpg)に関係しているようです。FirefoxとSafariは、これを行う方法について合意しているようです。文字を突き出すことができます。ただし、サイズx 10を誇張すると、に興味深いことがわかりsans-serifます。

Mac OS Xでは、SafariとFirefoxの両方helveticaがの書体として選択されましたsans-serif。ただし、Firefoxはその特定の書体を行の高さのボックスで上に移動するため、下部が「はみ出さない」ようになっています。と比較してください-両方のブラウザがそれをarial際立たせる場所のマイクロソフトのろくでなし。helvetica

SafariとFirefoxのディセンダーsans-serif/arial

あなたの問題の解決策は、コンテンツを上向きに相殺するための「合理的な」負のマージンを見つけることだと思います。それは両方のようで、箱の上部helveticaarialいくつかの「小刻みに動く部屋」があります。あなたの例では、特定の/に#wrapper #content { margin-top: -1px; }(克服するために非常に強力なセレクター)を使用します。#wrapper *font-sizeline-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>
于 2010-12-01T15:14:52.853 に答える
2

行の高さを1px増やしてみましたか?Chromeで試してみましたが、機能します。

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

と:

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

または、フォントサイズを1px小さくすることもできます。これは、私にとっても機能します。

/* alternative solution: */
font-size: 18px;
于 2010-12-01T20:54:10.350 に答える