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中测试)，它只将框阴影应用于第一行和最后一行。在其他浏览器中，它将框阴影应用到每一行。

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

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

Answer 1

对于任何想要解决这个问题的人来说，this question上的答案回答了我的问题的第二部分。以下css行是必需的：

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

Answer 2

我不认为这是个bug。不同的浏览器显示填充和边距的方式不同，这可能是Mozilla感觉最好的方式。如果你想让它看起来和Chrome一致，你可以像这样给每一行添加跨度

<span>Hello World Hello World Hello World</span>
<span>Hello World Hello World Hello<br></span>
<span>Hello World Hello World Hello World</span>

Answer 3

火狐这样做是正确的，因为你只有一个 <span></span>。在codepen的编辑器(或任何其他编辑器)中，任何数量的文本行都将被视为一个长行(即使添加了<br>或类似内容，就像您的示例中一样)。因此，该行开头/末尾的框阴影是唯一正确的输出。为FF万岁。

顺便说一下: IE11，CH和FF都使用webkit (在某种程度上)，其中FF是最符合W3C的。