div成为前一个div的孩子？ - CSS 的怪癖？ Javascript？ [复制]

Posted 2023-02-19

【中文标题】div成为前一个div的孩子？ - CSS 的怪癖？ Javascript？ [复制]

【英文标题】：Div becomes child of previous div? - a quirk of CSS? Javascript? [duplicate]

【发布时间】：2015-10-31 01:29:23

【问题描述】：

它在我可以看到页面的所有浏览器上都以这种方式工作。我向你发誓，这是来自 html 的 exact 代码：

<td class="bardisplay">
  <div class="bar hot" />
  <div class="bar cool" />
</td>

但是，在我引入的每个浏览器的调试器中，DOM 检查器都会显示如下内容：（Chrome，此处）

Mozilla、IE 和 Chrome 之间没有区别。当我在 Chrome 调试器中看到它时，我差点吓坏了。

这里是所有相关的 CSS：

  td.bardisplay  
      height      : 66px;
      padding     : 8px 0px;
      margin-left : 5pt;
  

  .bar  height  : 50px; 
  .hot  
    float            : left;
    background-color : red;
  
  .cool   
    float            : left;
    background-color : green; 
  

现在，真正奇怪的是：当我将所有条形显示放入主表（3 级以上）时，我没有遇到这个问题，相同的 html。

我有一个六列的表格，一个带有标签，一个带有显示，一个带有比率，接下来的三个重复，但我不喜欢第二组列如何“摇摆”回来随着表格的更新。所以我将主表设置为单行的两个 td，其中包含三列表。显示现在是坚如磐石，除了 DOM 想把一个 div 放在另一个里面。

在发帖之前，我用谷歌搜索了所有我能想到的方法。

【问题讨论】：

Divs 不会自动关闭。

@Quentin，如果你调用使用错误的斜线来关闭元素“相同的问题”，是的，我猜它有。

【参考方案1】：

<div> 的 cannot 自关闭，因此浏览器假定第二个是第一个的子：

<td class="bardisplay">
  <div class="bar hot"></div>
  <div class="bar cool"></div>
</td>

在 HTML 5 中，<foo /> 表示 <foo>，即开始标记。它不是“自闭标签”。相反，某些元素被指定为没有结束标签，例如<br>。这些统称为空元素。对于沉迷于 XML 的人来说，斜线只是语法糖。在非空元素标签中使用斜线是无效的，但浏览器无论如何都会将其解析为开始标签，导致结束标签不匹配。

^Source

【讨论】：

好吧，这很奇怪。因为，当我重写表格时，我确实将它从 <div...></div> 更改了，并且我认为我已经完成了，并进行了全局替换并将其更改回来，但没有任何改进。不过，在我阅读的有关 HTML 5 的文章中，我并不知道它们将 远离 XML。这很容易知道。

【参考方案2】：

这个怎么样？

<td class="bardisplay">
    <div class="bar hot"> </div>
    <div class="bar cool"> </div>
</td>