4

我已经隔离了一些奇怪的行为，当你有一个样式为溢出的块时似乎会发生这种行为：隐藏，并使用@font-face 声明的字体（我一直在使用 Google Web Fonts）。clientHeight 与元素的实际高度不对应——似乎更短一些。我已经在 Chrome 和 Firefox 中复制了。有谁知道这里发生了什么？

（不幸的是，它不会在 JSFiddle 中重现，但这是代码——如果你在未经修改的浏览器中查看它，你应该会看到大约 80% 的段落。）（https://gist.github.com/2702563）

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Esteban' rel='stylesheet' type='text/css'>
        <style>
            #demo{
                width: 30em;
                            /* comment either of the lines below out and it'll work */
                overflow: hidden;
                font-family: 'Esteban';
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <p>I give Pirrip as my father's family name, on the authority of his
            tombstone and my sister,&mdash;Mrs. Joe Gargery, who married the blacksmith.
            As I never saw my father or my mother, and never saw any likeness
            of either of them (for their days were long before the days of
            photographs), my first fancies regarding what they were like were
            unreasonably derived from their tombstones. The shape of the letters on
            my father's, gave me an odd idea that he was a square, stout, dark man,
            with curly black hair. From the character and turn of the inscription,
            &ldquo;Also Georgiana Wife of the Above,&rdquo; I drew a childish conclusion that
            my mother was freckled and sickly. To five little stone lozenges, each
            about a foot and a half long, which were arranged in a neat row beside
            their grave, and were sacred to the memory of five little brothers of
            mine,&mdash;who gave up trying to get a living, exceedingly early in
            that universal struggle,&mdash;I am indebted for a belief I religiously
            entertained that they had all been born on their backs with their hands
            in their trousers-pockets, and had never taken them out in this state of
            existence.</p>
        </div>
        <script>
            document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px';
        </script>
    </body>
</html>
4

2 回答 2

1

看起来脚本是在字体应用于段落之前被解释的。如果您停用网络字体，则框的高度与预期的完全一样：整个段落都是可读的。如果您调试代码并在脚本处设置断点并在页面加载完成后继续执行，则不会出现意外高度。

您可以通过在 window.onload-event 中执行脚本来解决此问题，以便在应用 webfont 后读取 clientHeight：

<!DOCTYPE html>
<html>
   <head>
      <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Esteban' rel='stylesheet' type='text/css'>
      <style>
         #demo{
            width: 30em;
            overflow: hidden;
            font-family: 'Esteban';
         }
      </style>
   </head>
   <body>
      <div id="demo">
         <p>I give Pirrip as my father's family name, on the authority of his
           tombstone and my sister,&mdash;Mrs. Joe Gargery, who married the blacksmith.
           As I never saw my father or my mother, and never saw any likeness
           of either of them (for their days were long before the days of
           photographs), my first fancies regarding what they were like were
           unreasonably derived from their tombstones. The shape of the letters on
           my father's, gave me an odd idea that he was a square, stout, dark man,
           with curly black hair. From the character and turn of the inscription,
           &ldquo;Also Georgiana Wife of the Above,&rdquo; I drew a childish
           conclusion that my mother was freckled and sickly. To five little stone
           lozenges, each about a foot and a half long, which were arranged in a neat
           row beside their grave, and were sacred to the memory of five little
           brothers of mine,&mdash;who gave up trying to get a living, exceedingly
           early in that universal struggle,&mdash;I am indebted for a belief I
           religiously entertained that they had all been born on their backs with
           their hands in their trousers-pockets, and had n ever taken them out in
           this state of existence.</p>
        </div>
        <script>
         window.onload = function(){document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px';}
        </script>
     </body>
</html>
于 2012-08-26T16:05:27.997 回答
0

No this looks like a damn real Chrome bug.

Even if you the page is fully loaded, and regardless of how many times you have used the webfont in your page, when setting the content of a div with overflow hidden with a webfont you will not get the right content height synchronously...

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Tenor+Sans|Esteban' rel='stylesheet' type='text/css'>
        <style>
            #demo{
                width: 30em;
                /* comment either of the lines below out and it'll work */
                overflow: hidden;
                font-family: 'Esteban';
                background:#ddd;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            Placeholder...
        </div>
        <script>
            window.onload = function() {
                document.getElementById('demo').innerHTML = "<p>I give Pirrip as my father's family name, on the authority of his tombstone and my sister,&mdash;Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones. The shape of the letters on my father's, gave me an odd idea that he was a square, stout, dark man, with curly black hair. From the character and turn of the inscription, &ldquo;Also Georgiana Wife of the Above,&rdquo; I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine,&mdash;who gave up trying to get a living, exceedingly early in that universal struggle,&mdash;I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.</p>"

                // wrong size only with Chrome
                //document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px'; 

                // the more you wait, the more chances you have to get the right size
                setTimeout(function() {
                    document.getElementById('demo').style.height = document.getElementById('demo').clientHeight + 'px'; 
                }, 10); 
            }
        </script>
    </body>
</html>
于 2013-12-17T16:36:00.537 回答