我遇到了一个奇怪的问题 - 完全相同的标记在jsFiddle中运行正常，但是当我将它放在文本文件中时，只显示标题并且不显示实际内容。
我见过其他类似的问题，但它们涉及jQuery（我还没有使用）。
链接： http://jsfiddle.net/3BpRr/
修改
由于某种原因，Jsfiddle有<style type="text/css">两次。我做到了，它的确有效。
第二个问题：
<div class="chatLine">
<div class="chatName">John </div>
<div class="chatMsg">I am very hungry.</div>
</div>
<br />
<div class="chatLine">
有没有办法将<br />放在chatLine div中？我将需要使用javascript来创建/销毁chatLines。
提前谢谢！
答案 0 :(得分：3)
问题出在overflow:hidden;属性上。删除它或使选择器更精确，因为它当前正在选择所有元素。
编辑：将<br />放在chatLine <div>末尾的原因导致事情爆发是因为您使用的是绝对定位。尽量不要使用绝对定位，除了实际上绝对的东西。
答案 1 :(得分：1)
我修改了你的上一个jsfiddle：http://jsfiddle.net/qktrv/1/
希望这就是你想要实现的目标。
<强>的变化：
jsFiddle在CSS框中不需要样式标记，所以我把它拿出来了。此外，我更改了在所有div上设置绝对定位的规则，并将其放在需要它的每个div上。即使几乎所有东西都设置为绝对，这可能会阻止其他问题。如果你想稍后再修改它以制作一个较短的CSS文件，我不会看到这样做的危害，只要你在没有绝对定位的div上设置正确的位置。
<强>概述：
您的chatLine，chatName和chatMsg div都是绝对的，因为该规则将它们从文档的正常流程中取出。换句话说，他们不会扩展父div。