Question

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

  -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;我会丢失＆＃34;填充＆＃34;在左侧和右侧。如果使用white-space: pre-wrap;，文字在溢出时不再与上面的行保持一致。

有关如何在所有浏览器上保持一致性的任何想法吗？

Answer 1

不确定为什么要white-space。它会导致问题，因为h2内部有换行符。只需删除它，或删除换行符。

然后，Firefox和Chrome之间的区别在于Chrome的行为与您使用box-decoration-break : clone的行为相似，但初始值应为slice。

所以只需添加

h2 {
  box-decoration-break: clone;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

交叉兼容性 - 具有多行跨度的盒子阴影

1 个答案: