html - Firefox box-shadow 表现不同

Question

我正在尝试使用以下 CSS 在跨度中获得可变长度的“填充”行的效果。我们不知道这些行的内容是什么。

这里可以看到效果:

#container{
  width:300px;
  margin:0 auto;
  background-color:#ccc;
  height:100px;
  padding:20px;
}

.text{
  max-width:250px;
}

span{
  max-width:250px;
  background-color: #FF8E1B;
  box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -moz-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -webkit-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  display: inline;
  padding: 1px 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: .28px;
  font-weight: 100;
  color:#fff;
}

<div id="container">
  <div class="text">
    <span>
      Hello World Hello World Hello World
      Hello World Hello World Hello<br>
      Hello World Hello World Hello World
    </span>
  </div>
</div>

在 Firefox 中(仅在 42 中测试过)，它只将 box-shadow 应用于第一行和最后一行。在所有其他浏览器中，它会将框阴影应用于每一行。

1) 这是 Firefox 中的错误吗？我应该向 Mozilla 提交错误报告吗？

2) 有没有办法解决这个问题或用给定的约束获得这种效果的其他方法？

Answer 1

this question 上的答案回答我问题的第 2 部分，适用于任何正在寻找此问题解决方案的人。这些 CSS 行是必需的:

  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;