(資料圖片僅供參考)

實(shí)踐過(guò)不同前端框架的朋友應(yīng)該都知道，對(duì)于同一個(gè)樣式，在不同框架上的表現(xiàn)都會(huì)有不同，時(shí)時(shí)需要做“適配”，在 Blazor 上也不例外。在做 Ant Design Blazor 時(shí)就深有體會(huì)，因?yàn)槲覀兪峭焦俜降臉邮剑麄兊臉邮街豢紤]了React 上的實(shí)現(xiàn)，除非有人專門(mén)提 PR，否則都不會(huì)特別考慮其他框架的實(shí)現(xiàn)。本文就介紹一個(gè)典型問(wèn)題。

當(dāng)我們使用 Razor 模板時(shí)，特別是使用 iffor等語(yǔ)句塊時(shí)，都會(huì)導(dǎo)致 HTML 元素或者組件換行。而運(yùn)行后輸出的 HTML 也會(huì)換行，而瀏覽器對(duì)于HTML換行會(huì)轉(zhuǎn)換成空格，空格又由于默認(rèn)或繼承的字體大小，讓元素之間出現(xiàn)空隙。這對(duì)于本來(lái)就要換行的塊狀元素沒(méi)什么問(wèn)題，但對(duì)于想要在一行顯示的行內(nèi)元素，就會(huì)有一個(gè)空隙。下面是一個(gè)例子：

    1    2    2

結(jié)果可以看出，數(shù)字之間和數(shù)字周圍都有空隙：

而我們看下不換行是怎樣的：

122

可以看到數(shù)字之間沒(méi)有空隙。那么，怎么解決呢？

其實(shí)這屬于 css 的一個(gè)常見(jiàn)問(wèn)題，解決方法也通用的，就是想辦法使那些從換行轉(zhuǎn)換的空格的字號(hào)變?yōu)?0，使空隙消失，并恢復(fù)子元素的字號(hào)：

    1    2    2

結(jié)果：

標(biāo)簽：