問題描述

期待樣式：

單一精確度顯示：“精確度等級：xxxxx”

非單一精確度顯示：“精確度等級：xxxxx ~ xxxxx”

錯誤實現(xiàn)

下面是錯誤的示范，僅供說明使用：

<p ng-repeat="parameter in object.parameterCalibrateAbilitySet">
    <p ng-if="parameter.parameterCategory.singleAccuracyOrNot">
        準確度等級：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }}
    </p>
    <p ng-if="!parameter.parameterCategory.singleAccuracyOrNot">
        準確度等級：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ' ~ ' + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }}
    </p>
</p>

看代碼感覺沒問題，但是渲染出來是這么個東西，沒有數(shù)據(jù)。

原因分析

打開控制臺，看我們的DOM結(jié)構(gòu)，發(fā)現(xiàn)我們原來的嵌套p標簽被渲染為3個獨立的p標簽。

所以看結(jié)構(gòu)，我們的準確度等級不在ng-repeat修飾的p標簽中，所以無法獲取數(shù)據(jù)，就會顯示錯誤。

渲染猜想

以下均為個人猜想，如果錯誤歡迎批評指正。

假如我們寫了一個嵌套的p標簽，因p標簽不能嵌套塊級元素。

所以瀏覽器渲染到第二行時，發(fā)現(xiàn)了一個塊級元素，會認為第一行的p標簽已經(jīng)完結(jié)了，所以瀏覽器認為是開發(fā)者少寫了一個p的結(jié)束標簽。

同理，最后，瀏覽器會認為開發(fā)者少寫了一個p的開始標簽。

所以最后會呈現(xiàn)出如上圖所示的DOM結(jié)構(gòu)。

總結(jié)

歸根結(jié)底，就是p標簽中不能嵌套塊級元素。

內(nèi)聯(lián)元素不能嵌套塊級元素，p標簽中不能嵌套塊級元素。這些我們可能都或多或少聽說過，但是我們只是把它當(dāng)做一種規(guī)范。

相關(guān)文章推薦：

父元素<a>標簽的默認行為以及click事件之間的相互影響

link標簽鏈接CSS和@import加載有什么區(qū)別？

以上就是html中標簽嵌套的問題如何解決的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！