頁面中文字增多，字號會忽然變大

我也是偶然發現這個問題，原本活動說明只有一條內容，可是後來運營想加到六條，那就加唄，我就直接把增長的文案複製到代碼中

以前的內容是這樣的：活動說明的內容字號設置爲24px

在我加了幾個文案以後，忽然變成了這樣：

當時我是蒙的，查看控制檯代碼：

字號設置依舊是24px啊，但是24px何時是這麼大的字號了

對比其餘設置爲24px的字號：

上圖中，「（剩餘77）」 纔是正常的24px字號，再看看下面的活動說明內容，明顯不同

因而開始了艱難的找bug。。。

把其餘HTML結構註釋掉，沒用

把全部的CSS樣式一點點註釋掉，也沒用

當時個人心裏是崩潰的，歷來沒有見過這樣的問題

後來反覆的調試，最終把代碼刪到只剩內容，讓我發現了兩個可疑的問題

（1）font-family: 'Microsoft YaHei';  可使字號變大

圖一是沒有使用微軟雅黑的情況，圖二是使用了微軟雅黑的情況，能夠看出兩個樣式字體大小明顯不一致，可是差異並不大（字體顏色是微軟雅黑自帶的，我沒有設置顏色）

那字體設置爲微軟雅黑就是形成字體變大的根本緣由嗎，固然不是，微軟雅黑咱們常常會用到，可是並無發現這種情況，

因此能夠理解爲，雖然微軟雅黑會稍微影響字體大小，但影響並不大（小白本身的理解，有不正確之處歡迎各路大神指出）

（2）給內容的父元素或者祖先元素設置高度能夠回到正常的大小

HTML代碼：

<div class="demo">
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
  <p>這是一個測試這是一個測試這是一個測試</p>
</div>

 

圖一是設置了demo高度300px，字體24px，  圖二沒有設置高度，只設置字體24px，下面是效果對比圖：

能夠看出，圖一纔是正確的字體大小，而圖二根本不是24px，差異就只在於有沒有設置父元素的高度

可是爲何父元素有沒有設置高度會影響子元素的字體呢，父元素的高度不該該是由子元素自動撐開的嗎，

在咱們平時的定位佈局中，並非全部的元素都須要設置高度的，若是給每個元素都設置高度，會顯得太過於死板了

小白我只找到了問題所在，還不知道爲何父元素或者祖先元素的高度會影響字體，之後再繼續探尋

有錯誤之處歡迎指出

by新手小白的記錄