問題描述
期待樣式:

單一精確度顯示:“精確度等級(jí):xxxxx”
非單一精確度顯示:“精確度等級(jí):xxxxx ~ xxxxx”
錯(cuò)誤實(shí)現(xiàn)下面是錯(cuò)誤的示范,僅供說(shuō)明使用:
p ng-repeat= parameter in object.parameterCalibrateAbilitySet p ng-if= parameter.parameterCategory.singleAccuracyOrNot 準(zhǔn)確度等級(jí):{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }} p ng-if= !parameter.parameterCategory.singleAccuracyOrNot 準(zhǔn)確度等級(jí):{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ~ + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }} /p 看代碼感覺沒問題,但是渲染出來(lái)是這么個(gè)東西,沒有數(shù)據(jù)。

打開控制臺(tái),看我們的DOM結(jié)構(gòu),發(fā)現(xiàn)我們?cè)瓉?lái)的嵌套p標(biāo)簽被渲染為3個(gè)獨(dú)立的p標(biāo)簽。

所以看結(jié)構(gòu),我們的準(zhǔn)確度等級(jí)不在ng-repeat修飾的p標(biāo)簽中,所以無(wú)法獲取數(shù)據(jù),就會(huì)顯示錯(cuò)誤。
渲染猜想以下均為個(gè)人猜想,如果錯(cuò)誤歡迎批評(píng)指正。
假如我們寫了一個(gè)嵌套的p標(biāo)簽,因p標(biāo)簽不能嵌套塊級(jí)元素。

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

同理,最后,瀏覽器會(huì)認(rèn)為開發(fā)者少寫了一個(gè)p的開始標(biāo)簽。

所以最后會(huì)呈現(xiàn)出如上圖所示的DOM結(jié)構(gòu)。
總結(jié)歸根結(jié)底,就是p標(biāo)簽中不能嵌套塊級(jí)元素。
內(nèi)聯(lián)元素不能嵌套塊級(jí)元素,p標(biāo)簽中不能嵌套塊級(jí)元素。這些我們可能都或多或少聽說(shuō)過(guò),但是我們只是把它當(dāng)做一種規(guī)范。
相關(guān)文章推薦:
父元素 a 標(biāo)簽的默認(rèn)行為以及click事件之間的相互影響
link標(biāo)簽鏈接CSS和@import加載有什么區(qū)別?
以上就是html中標(biāo)簽嵌套的問題如何解決的詳細(xì)內(nèi)容,html教程
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
|
新聞熱點(diǎn)
疑難解答
圖片精選