交叉兼容性-带多线跨度的盒影

Question

我有一个元素，它使用box-shadow为它提供了一个与内联元素长度一致的背景，更重要的是，当你缩小窗口，文本溢出到新的一行时，保持一致。

http://jsfiddle.net/ric0c/dgersydv/

  -moz-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  -webkit-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  background: #7E8573;
  color: #fff;
  line-height: 30px;
  padding: 5px 10px 5px 0px;
  margin: 18px 0;
  font-size: 20px;
  display: inline;
  white-space: pre-line;
  position: relative;
  left: 10px;

现在，它可以在Chrome和Safari上正常工作，但我在Firefox上得到了不一致的结果。如果使用white-space: pre-line;，我会丢失左边和右边的“填充”。如果使用white-space: pre-wrap;，当文本溢出时，它不再与上面的行保持一致。

有没有关于如何在所有浏览器上保持一致的想法？

Answer 1

不知道你为什么想要white-space。这会导致问题，因为在h2中有换行符。只需删除它，或删除换行符。

然后，火狐和Chrome的不同之处在于，Chrome的行为就像你使用box-decoration-break: clone一样，但初始值应该是slice。

所以只需添加

h2 {
  box-decoration-break: clone;
}

​

h2 {
  -moz-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  -webkit-box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  box-shadow: 4px 0 0px 0px #7E8573, -10px 0 0 #7E8573;
  background: #7E8573;
  color: #fff;
  line-height: 30px;
  padding: 5px 10px 5px 0px;
  margin: 18px 0;
  font-size: 20px;
  display: inline;
  position: relative;
  left: 10px;
  box-decoration-break: clone;
}

<h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus.
</h2>

​