2010-12-01 14 views
18

行の高さと余白の範囲がnで、その領域の高さがnの倍数で、scrollTopがnの倍数で増えた場合、Firefoxで期待した結果が得られます。 Opera、NetFrontはChrome(Windows)、Safari(Mac)、最新のWebKit nightly(Mac)ではリークがあり、部分行が表示されます。WebKitにクリッピングのバグはありますか?

私の実際のプロジェクト(私は共有できません)では、その効果はかなり顕著ですが、テストケースが縮小されても、前の行の下端がボックスの上部でピークに達することがあります。

この影響を避けることはできますか? WebKitレンダリングエンジンのバグは報告されるべきですか?

以下の縮小されたテストケースがあり、as a live example on my websiteです。文書を数回クリックすると、スクロールすることができます。ボックスの上部にある点(前の行の文字の一番下)はスクロールしません。

<!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> 
+3

ライブ:

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

を代わりにあなたも私の作品1ピクセルで、フォントサイズを小さくすることができます例は今死んでいる( –

答えて

27

これは、ラインハイトボックスの下に降りてくるディセンダ(qjpg)と関係があります。 FirefoxとSafariはこれを行う方法に同意しているようです。文字は飛び出します。しかし、サイズx 10を誇張して、我々はsans-serifのために興味深いものに気付く。

Mac OS Xでは、SafariとFirefoxの両方がをsans-serifの書体として選択しました。しかし、Firefoxはその特定の書体をラインハイトボックス内で上方に移動させるので、ボトムは「張り出し」ません。 arialと比較すると、両方のブラウザが突き出てしまうhelveticaというMicrosoftの挫折。

Safari vs Firefox descender sans-serif/arial

私はあなたの問題を解決するには、上向きにコンテンツを相殺するために「合理的な」負のマージンを見つけることだと思います。 helveticaarialの両方には、ボックスの上部に「ウィグルルーム」があるようです。あなたの例では、具体的なfont-size/line-heightのために#wrapper #content { margin-top: -1px; }(セレクタ余分な強さ#wrapper *)を使用します。

ここに私のテストコードです。それは、 "突き出る"ことがgenevaverdanaの方がずっと悪いことを示しています。

<!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> 
+0

+1「バスタリゼーション」XD – Bojangles

+0

これは素晴らしい、よく研究された答えのように見える。私はいくつかの考えを試してみたいので、実際のコードで最初に私を導いてきたので...しかし、私は雪が降っていて、それが格納されているマシンに到達することはできません! – Quentin

+0

Heh。ありがとう!テストコードを試し始めたら、私はそれを行かせることができませんでした:) - 自分自身で雪を勇気づけることについて。 -15ここに来る... –

2

1pxで線の高さを増やしましたか?私はChromeでそれを試してみましたが、それが動作します:

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

と:

/* alternative solution: */ 
font-size: 18px; 
関連する問題