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

フォントがパラグラフに適用される前に、スクリプトが解釈されるようです。Webフォントを非アクティブ化すると、ボックスの高さは期待どおりになります。段落全体が読み取り可能になります。コードをデバッグし、スクリプトにブレークポイントを設定し、ページの読み込みが完了した後も実行を継続する場合、予期しない高さはありません。

window.onload-eventでスクリプトを実行して、Webフォントが適用された後に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

いいえ、これはChromeの本当のバグのようには見えません。

ページが完全に読み込まれていても、ページでWebフォントを何度使用したかに関係なく、オーバーフローがWebフォントで非表示になっているdivのコンテンツを設定すると、適切なコンテンツの高さが同期的に取得されません...

<!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 に答える