資訊專欄INFORMATION COLUMN
摘要：所以瀏覽器渲染到第二行時，發(fā)現(xiàn)了一個塊級元素，會認(rèn)為第一行的標(biāo)簽已經(jīng)完結(jié)了，所以瀏覽器認(rèn)為是開發(fā)者少寫了一個的結(jié)束標(biāo)簽。內(nèi)聯(lián)元素不能嵌套塊級元素，標(biāo)簽中不能嵌套塊級元素。
問題描述
期待樣式：
單一精確度顯示：“精確度等級：xxxxx”
非單一精確度顯示：“精確度等級：xxxxx ~ xxxxx”
錯誤實現(xiàn)下面是錯誤的示范，僅供說明使用：
準(zhǔn)確度等級：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }}
準(zhǔn)確度等級：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + " ~ " + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }}
看代碼感覺沒問題，但是渲染出來是這么個東西，沒有數(shù)據(jù)。
原因分析打開控制臺，看我們的DOM結(jié)構(gòu)，發(fā)現(xiàn)我們原來的嵌套p標(biāo)簽被渲染為3個獨立的p標(biāo)簽。
所以看結(jié)構(gòu)，我們的準(zhǔn)確度等級不在ng-repeat修飾的p標(biāo)簽中，所以無法獲取數(shù)據(jù)，就會顯示錯誤。
渲染猜想以下均為個人猜想，如果錯誤歡迎批評指正。
假如我們寫了一個嵌套的p標(biāo)簽，因p標(biāo)簽不能嵌套塊級元素。
所以瀏覽器渲染到第二行時，發(fā)現(xiàn)了一個塊級元素，會認(rèn)為第一行的p標(biāo)簽已經(jīng)完結(jié)了，所以瀏覽器認(rèn)為是開發(fā)者少寫了一個p的結(jié)束標(biāo)簽。
同理，最后，瀏覽器會認(rèn)為開發(fā)者少寫了一個p的開始標(biāo)簽。
所以最后會呈現(xiàn)出如上圖所示的DOM結(jié)構(gòu)。
總結(jié)歸根結(jié)底，就是p標(biāo)簽中不能嵌套塊級元素。
內(nèi)聯(lián)元素不能嵌套塊級元素，p標(biāo)簽中不能嵌套塊級元素。這些我們可能都或多或少聽說過，但是我們只是把它當(dāng)做一種規(guī)范。
通過此事，我懂得，規(guī)范，不只是規(guī)范，那是前人對后人的忠告。有規(guī)范，我們可以避免一些不必要的錯誤。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52811.html
摘要：開發(fā)過程中遇到問題，簡單寫個運(yùn)行環(huán)境為描述一下這個問題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時，父元素標(biāo)簽的默認(rèn)行為以及子元素綁定的事件的響應(yīng)之間存在影響。 2018-08-07 Question about work 開發(fā)過程中遇到問題，簡單寫個demo 運(yùn)行環(huán)境為Chrome 68 描述一下這個問題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時， 父元素標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在...
摘要：開發(fā)過程中遇到問題，簡單寫個運(yùn)行環(huán)境為描述一下這個問題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時，父元素標(biāo)簽的默認(rèn)行為以及子元素綁定的事件的響應(yīng)之間存在影響。 2018-08-07 Question about work 開發(fā)過程中遇到問題，簡單寫個demo 運(yùn)行環(huán)境為Chrome 68 描述一下這個問題，當(dāng)標(biāo)簽內(nèi)部存在嵌套時， 父元素標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在...
摘要：標(biāo)簽屬性屬性名全部寫，屬性值雙引號引起來，每個雙標(biāo)簽務(wù)必加對應(yīng)的結(jié)束標(biāo)簽單標(biāo)簽不遵循此標(biāo)準(zhǔn)，仍按原標(biāo)準(zhǔn)，即不需要以結(jié)束。視情況為鏈接添加，圖要添加及。明確指定圖的和。 前言 作為一個前端工程師，我們可能每天都要寫html、css、javascript，每個人寫出來的代碼都飽含著自己的個人的style也有自己的編碼習(xí)慣和準(zhǔn)則，下面和大家分享一下我的習(xí)慣和準(zhǔn)則。 html 首先我們要對文...
摘要：標(biāo)簽屬性屬性名全部寫，屬性值雙引號引起來，每個雙標(biāo)簽務(wù)必加對應(yīng)的結(jié)束標(biāo)簽單標(biāo)簽不遵循此標(biāo)準(zhǔn)，仍按原標(biāo)準(zhǔn)，即不需要以結(jié)束。視情況為鏈接添加，圖要添加及。明確指定圖的和。 前言 作為一個前端工程師，我們可能每天都要寫html、css、javascript，每個人寫出來的代碼都飽含著自己的個人的style也有自己的編碼習(xí)慣和準(zhǔn)則，下面和大家分享一下我的習(xí)慣和準(zhǔn)則。 html 首先我們要對文...
閱讀 2108·2021-11-15 17:57
閱讀 789·2021-11-11 16:54
閱讀 2633·2021-09-27 13:58
閱讀 4220·2021-09-06 15:00
閱讀 990·2021-09-04 16:45
閱讀 3541·2019-08-30 15:56
閱讀 1810·2019-08-30 15:53
閱讀 1686·2019-08-30 14:12
