我已经隔离了一些奇怪的行为，当你有一个样式为overflow：hidden的块时，似乎会出现这种行为，并使用用@ font-face声明的字体（我一直在使用Google Web Fonts）。 clientHeight与元素的实际高度不对应 - 似乎有点短。我已经在Chrome＆amp;在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,—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,
“Also Georgiana Wife of the Above,” 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,—who gave up trying to get a living, exceedingly early in
that universal struggle,—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>
答案 0 :(得分：1)
看起来在将字体应用于parragraph之前解释了脚本。如果停用webfont，则框的高度完全符合预期：整个段落都是可读的。 如果您调试代码并在脚本中设置断点并继续执行 页面加载完成后，则没有意外的高度。
您可以通过在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,—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,
“Also Georgiana Wife of the Above,” 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,—who gave up trying to get a living, exceedingly
early in that universal struggle,—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>
答案 1 :(得分：0)
不，这看起来真是一个真正的Chrome漏洞。
即使您的页面已满载，并且无论您在页面中使用了多少次webfont，在设置使用webfont隐藏溢出的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,—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, “Also Georgiana Wife of the Above,” 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,—who gave up trying to get a living, exceedingly early in that universal struggle,—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>