重复线性梯度间距变得不同步

Question

我试图使用repeating-linear-gradient对代码块进行斑马条纹化处理。为此，我在代码块中指定了一个显式line-height，并以该值的间隔交替显示颜色。

它适用于几行，但文字和条纹最终停止排队。有谁知道这是为什么以及它是否可以修复？

＆＃13;

＆＃13;

pre {
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4em;
  background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 1.4em,
		#ddd 1.4em,
		#ddd 2.8em);
}

＆＃13;

<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
but
eventually
the
lines
and
stripes
get
messed
up
and
this
makes
me
sad.</pre>

＆＃13;

＆＃13;

＆＃13;

Answer 1

来自w3.org：

  

在块容器元素上，其内容由内联级别组成   元素，'line-height'指定线框的最小高度   在元素内。

此处的关键字为“最小”。如果font-size足够大，它会将行间距增加到超过定义的行高。

为了说明，这是一个字体较小的代码段：

pre {
  font-family: monospace;
  font-size: 10px;
  line-height: 1.4em;
  background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 1.4em,
		#ddd 1.4em,
		#ddd 2.8em);
}

<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever 
get
messed
up
and
this
makes
me
happy. :-)</pre>

或者这里有更高的行高：

pre {
  font-family: monospace;
  font-size: 12px;
  line-height: 2em;
  background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2em,
		#ddd 2em,
		#ddd 4em);
}

<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever 
get
messed
up
and
this
makes
me
happy. :-)</pre>