Chrome错误：显示内容中的内联元素之间会丢失空间：table

Question

Chrome中似乎存在一个错误：当它们位于具有display:table样式的父级内部时，它会删除通常位于内联元素之间的空白区域。

＆＃13;

＆＃13;

<div style="display:table;">
  <span>text1</span> <span>text2</span> 
  <span>text3</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Edge / Firefox显示此空间没有问题。有关变通方法的任何想法吗？

Answer 1

您可以使用非中断空格HTML字符实体 。

<div style="display:table;">
  <span>text1</span>&nbsp;<span>text2</span>
</div>

这将为您提供所有浏览器中项目之间的空间。