CSS在jsFiddle中工作，但只能在jsFiddle + DIV问题之外部分工作

Question

我遇到了一个奇怪的问题 - 完全相同的标记在jsFiddle中运行正常，但是当我将它放在文本文件中时，只显示标题并且不显示实际内容。

我见过其他类似的问题，但它们涉及jQuery（我还没有使用）。

链接： http://jsfiddle.net/3BpRr/

修改

由于某种原因，Jsfiddle有<style type="text/css">两次。我做到了，它的确有效。

第二个问题：

<div class="chatLine">
    <div class="chatName">John&nbsp;&nbsp;</div>
    <div class="chatMsg">I am very hungry.</div>
</div>
  <br />
<div class="chatLine">

有没有办法将<br />放在chatLine div中？我将需要使用javascript来创建/销毁chatLines。

提前谢谢！

Answer 1

1. 问题出在overflow:hidden;属性上。删除它或使选择器更精确，因为它当前正在选择所有元素。

2. 编辑：将<br />放在chatLine <div>末尾的原因导致事情爆发是因为您使用的是绝对定位。尽量不要使用绝对定位，除了实际上绝对的东西。

Answer 2

我修改了你的上一个jsfiddle：http://jsfiddle.net/qktrv/1/

希望这就是你想要实现的目标。

<强>的变化：

jsFiddle在CSS框中不需要样式标记，所以我把它拿出来了。此外，我更改了在所有div上设置绝对定位的规则，并将其放在需要它的每个div上。即使几乎所有东西都设置为绝对，这可能会阻止其他问题。如果你想稍后再修改它以制作一个较短的CSS文件，我不会看到这样做的危害，只要你在没有绝对定位的div上设置正确的位置。

<强>概述：

您的chatLine，chatName和chatMsg div都是绝对的，因为该规则将它们从文档的正常流程中取出。换句话说，他们不会扩展父div。