2010-12-01 32 views
18

給定一個區域的行高和任何邊距是n,並且該區域的高度是n的倍數,並且scrollTop增加了n的倍數,我發現我得到了我期望在Firefox中得到的結果, Opera和NetFront,但在Chrome(Windows),Safari(Mac)和最新的WebKit每日(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; 

或者,你可以1px的也對我的作品減小字體大小示例現在已經死亡( – 2012-06-08 11:15:33

回答

27

看起來這與下行線(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

我認爲,解決問題的方法是找到一個「合理的」陰性切緣向上偏移的內容。看起來helveticaarial在盒子頂部有一些「擺動室」。在您的示例中,我將使用#wrapper #content { margin-top: -1px; }(選擇器超強,以克服#wrapper *),具體爲font-size/line-height

這是我的測試代碼。它顯示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 2010-12-01 21:03:41

2

您是否嘗試過增加1px的行高?我想它在Chrome和它的工作原理:

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

和:

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