Question

我在VS 2013中的ASP.NET项目中使用了一些进度指示器的布局，我在它生成的标记中发现了一些奇怪的东西。我的.aspx页面包含以下代码：

<div id="divProgressBar">
        <div id="divProgressVisual">
            <asp:Image ID="imgCircle1" runat="server" CssClass="progress circle" style="margin-left: 34px;" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine2" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle2" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine3" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle3" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine4" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle4" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <div style="clear: both;" />
        </div>
        <div id="divProgressLabels">
            <span class="labelblock">|<br />Upload File</span>
            <span class="labelblock">|<br />Import Into Database</span>
            <span class="labelblock">|<br />Perform Comparison</span>
            <span class="labelblock">|<br />Export File</span>
            <div style="clear: both;" />
        </div>
    </div>

这个div将被放入母版页中，因为它的价值。不要担心CSS，因为这不是布局问题。

当我在Firebug中查看生成的HTML时，我看到了：

<div id="divProgressBar">
  <div id="divProgressVisual">
    <img id="MainContent_imgCircle1" class="progress circle" src="images/GrayCircle.png" style="margin-left: 34px;">
    <img id="MainContent_imgLine2" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle2" class="progress circle" src="images/GrayCircle.png">
    <img id="MainContent_imgLine3" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle3" class="progress circle" src="images/GrayCircle.png">
    <img id="MainContent_imgLine4" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle4" class="progress circle" src="images/GrayCircle.png">
    <div style="clear: both;"> </div>
    <div id="divProgressLabels">
      <span class="labelblock">
        |
        <br>
        Upload File
      </span>
      <span class="labelblock">
        |
        <br>
        Import Into Database
      </span>
      <span class="labelblock">
        |
        <br>
        Perform Comparison
      </span>
      <span class="labelblock">
        |
        <br>
        Export File
      </span>
      <div style="clear: both;"> </div>
    </div>
  </div>
</div>

divProgressLabels突然嵌套在divProgressVisual中！在这种情况下，这不会导致任何布局问题，但它相当奇怪，我想知道它为什么这样做以及如何阻止它。

Answer 1

更改

<div style="clear: both;" />

到

<div style="clear: both;"></div>

另见Are self-closing tags valid in HTML5?。

相邻的div被VS

1 个答案: