我的CSS:
.reviewRow
{
clear:both;
padding-top:0;
margin-top:0;
}
.reviewBlock
{
float:left;
height:100%;
padding-top:0;
margin-top:0;
border-top: 1px solid #444;
border-left: 1px solid #444;
}
.reviewCaption
{
font: normal normal normal 6pt verdana;padding-left:0.03in;
}
.reviewText
{
font: normal normal normal 8pt verdana;
height:20px;
}
我的 HTML:
<body>
<div style="HEIGHT: 30px" class=reviewRow>
<div style="WIDTH: 125px" class=reviewBlock>
<div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger.
</div>
</div>
</div>
</body>
上面的 HTML 不包含在我遇到问题的网页中。它是动态生成的，因此里面的文本可能很短也可能很长。通常，我希望这会渲染一个 30 像素高的框，其中包含文本，除非文本太大，在这种情况下，框将扩展以适合文本。
问题在于，当此 HTML 出现在另一个页面中时，文本会“溢出”到框中。我不明白问题是什么。让事情变得更复杂的是，如果我删除“高度”样式，它实际上会使盒子更高。
我看过MDN documentation 。它清楚地表明，默认情况下，CSS“overflow”的值为“visible”，在这种情况下，文本“可能会溢出”，但在任何情况下我都不希望出现滚动条。
我尝试修改包含元素的“位置”CSS，但这似乎没有任何作用。
什么可能导致这里出现问题？
更新 我已经找到了导致问题的原因!这是文档类型声明!如果我从摘录的页面中删除文档类型声明，它将呈现良好!为什么？
最佳答案
尝试将 min-height:20px;max-height:400px; 赋予 .reviewText
关于html - 我无法使用 CSS 正确设置 HTML 元素的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13826302/