解决 Blazor 中因标签换行导致的行内元素空隙问题

  • 解决 Blazor 中因标签换行导致的行内元素空隙问题已关闭评论
  • 84 次浏览
  • A+
所属分类:.NET技术
摘要

实践过不同前端框架的朋友应该都知道,对于同一个样式,在不同框架上的表现都会有不同,时时需要做“适配”,在 Blazor 上也不例外。在做 Ant Design Blazor 时就深有体会,因为我们是同步官方的样式,他们的样式只考虑了React 上的实现,除非有人专门提 PR,否则都不会特别考虑其他框架的实现。本文就介绍一个典型问题。

实践过不同前端框架的朋友应该都知道,对于同一个样式,在不同框架上的表现都会有不同,时时需要做“适配”,在 Blazor 上也不例外。在做 Ant Design Blazor 时就深有体会,因为我们是同步官方的样式,他们的样式只考虑了React 上的实现,除非有人专门提 PR,否则都不会特别考虑其他框架的实现。本文就介绍一个典型问题。

当我们使用 Razor 模板时,特别是使用 if for 等语句块时,都会导致 HTML 元素或者组件换行。而运行后输出的 HTML 也会换行,而浏览器对于HTML换行会转换成空格,空格又由于默认或继承的字体大小,让元素之间出现空隙。这对于本来就要换行的块状元素没什么问题,但对于想要在一行显示的行内元素,就会有一个空隙。下面是一个例子:

<div class="badge">     <span>1</span>     <span>2</span>     <span>2</span> </div>  <style>     .badge {         background-color: red;         font-size: 32px;     }          .badge span {             background-color: green;         } </style> 

结果可以看出,数字之间和数字周围都有空隙:

解决 Blazor 中因标签换行导致的行内元素空隙问题

而我们看下不换行是怎样的:

<div class="badge"><span>1</span><span>2</span><span>2</span></div>  <style>     .badge {         background-color: red;         font-size: 32px;     }          .badge span {             background-color: green;         } </style> 

解决 Blazor 中因标签换行导致的行内元素空隙问题

可以看到数字之间没有空隙。那么,怎么解决呢?

其实这属于 css 的一个常见问题,解决方法也通用的,就是想办法使那些从换行转换的空格的字号变为 0,使空隙消失,并恢复子元素的字号:

<div class="badge">     <span>1</span>     <span>2</span>     <span>2</span> </div>  <style>     .badge {         background-color: red;         font-size: 0;     }          .badge span {             background-color: green;             font-size: 32px;         } </style> 

结果:

解决 Blazor 中因标签换行导致的行内元素空隙问题