嵌套display块元素中CSS background背景色不显示问题

代码中使用的replay、moves、lines、line-、move都属于自定义HTML标签，浏览器对没有显式声明样式的未知标签，默认会设置为display: inline（行内显示）。
当前CSS只给lines、line-设置了display: block（块级显示），给move设置了display: inline-block，但夹在嵌套结构中间的replay、moves两个自定义容器没有设置块级样式，保持着默认的行内状态。
按照CSS渲染规则：行内元素内部如果嵌套块级元素，浏览器会把这个行内父元素拆成多个匿名行内框，分别放在块级子元素的前后位置。行内父元素的背景、边框这类样式，只会渲染在拆分出来的匿名行内框覆盖的区域，块级子元素占据的区域不会被行内父元素的样式覆盖。.wrap设置的红色背景需要逐层向下透传，中间的moves、replay作为行内元素，遇到块级的lines子元素时被截断，lines及其内部子元素的区域不在父行内元素的渲染范围内，自然显示不出红色背景。
测试时移除lines或line-的display: block声明后，这些元素回到默认行内状态，整个嵌套结构里没有块级元素打断行内父元素的渲染，父元素可以完整包裹所有行内内容，背景就会正常显示。

• 最稳妥的通用方案：给所有作为容器使用的自定义标签统一设置块级显示，从根源避免行内元素嵌套块级元素的异常渲染，在CSS中添加如下代码即可：

replay,
moves,
lines,
line- {
  display: block;
}

添加后从.wrap往下的所有容器都是块级元素，块级元素会自动拉伸高度完整包裹所有子元素，红色背景就能覆盖全部内容区域。

• 如果不想批量设置，也可以单独给出现截断的父元素replay、moves设置display: block，同样能解决问题。
• 注意：自定义元素如果作为容器使用，最好在初始化样式里就统一声明display: block，避免不同浏览器对未知元素的默认样式差异导致不可预期的渲染问题。

内容的提问来源于stack exchange，提问作者eguneys