具有<br/>内联元素的内联元素在内联块内部表现奇怪

Question

• 为什么以下代码在Chrome和Firefox上都不会呈现相同的效果（在Mac上都有）？

• 如何使两者渲染相同？

铬

火狐

＆＃13;

＆＃13;

<p style="display:inline-block">some <span>te<br/>xt</span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来浏览器以不同方式呈现空白，添加white-space:pre;帮助。

  

white-space:pre 保留了空白的序列，只在源代码中的换行符和<br>元素处断行。

<p style="display:inline-block;white-space:pre;">some <span>te<br/>xt</span></p>