I am trying to understand why is there a difference in how a browser displays <div></div> verses <div />?
Here is an example: The expected output of snippet #1 is three boxes, side by side: [black], [blue], [red]. Snippet #2 only displays [black] and [red] - Why isn't the [blue] box rendered in snippet #2?
1:
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;"></div>
<div style="float:left; width:50px; height:50px; background:red;"></div>
2:
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;" />
<div style="float:left; width:50px; height:50px; background:red;"></div>
Edit: I am using Chrome 12 & html5: <!doctype html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
